Rails アプリを Heroku にデプロイしたところ、開発環境では問題なく表示されていたすべてのブートストラップ アイコンが、Heroku では小さな四角形としてのみ表示されました。プリコンパイルされたアセットを使用してローカル マシンでアプリを運用モードで実行している場合も、同じことが起こります。Rails 3、twitter-bootstrap-rails gem、および LESS を使用しています。
掘り下げた後、私はこれを発見しました：
ブートストラップ用の実際の CSS は、twitter-bootstrap-rails 外部ライブラリ内の一連の LESS ファイル全体に分散されています。sprites.less は、アイコンに関するルールが記述されているファイルです。[class^="icon-"], [class*=" icon-"] の下に、'background-image' プロパティを @iconSpritePath に設定するルールがあります。@iconSpritePath は、bootstrap_and_overrides.css.less ファイルで asset-path('twitter/bootstrap/glyphicons-halflings.png') として定義されています。
理解できない何らかの理由で、これは開発環境では正常に機能しますが、アセットをプリコンパイルして本番環境で実行すると、コンパイルされた CSS ファイルで @iconSpritePath が「none」に置き換えられるため、すべてのアイコンの「background-image」プロパティは「none」です。
他の誰かがこの問題を抱えていましたか?それを解決する方法について何かアイデアを持っている人はいますか? LESSファイルにいくつかの変更を加える必要があると思います...
編集:問題は実際にはアイコンへのパスではないことがわかりました。コンパイル中に、次のような追加のルールが CSS ファイルの先頭に追加されます。
[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
これにより、ファイル内の [class^="icon-"]、[class*=" icon-"] の 2 番目のルールが上書きされます。これは、使用する必要があるものです。
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url("/assets/twitter/bootstrap/glyphicons-halflings-f6675c325532ec11a984d58e172b8e2a.png");
background-position: 14px 14px;
background-repeat: no-repeat;
margin-top: 1px;
これが追加される理由がわからない...