Rails3.2 で Twitter Bootstrap を使いたいけど、Windows では twitter-bootstrap-rails がインストールできなかったので、
で入手した bootstrap.zip を解凍し、assets 下の各ディレクトリに配置してみた。
これで Twitter Bootstrap の UI コンポーネントが使えるようになったけど、画像だけが表示されない。原因は、bootstrap.css に記述されている画像 URL が assets/images に配置したものを指していないから。
ビュー内では、assets/images に配置した画像 URL を、asset_path を使って
<%= asset_path "filename.png" %>
という風にして取得できる。そして、Rails の Asset Pipeline 機能は、拡張子 erb のファイルを処理してから配信してくれる。
つまり、bootstrap.css で assets/images に配置した画像を指定するには、boostrap.css.erb にリネームして、画像 URL の箇所を
... [class^="icon-"], [class*=" icon-"] { display: inline-block; width: 14px; height: 14px; line-height: 14px; vertical-align: text-top; background-image: url(<%= asset_path "glyphicons-halflings.png" %>); background-position: 14px 14px; background-repeat: no-repeat; *margin-right: .3em; } [class^="icon-"]:last-child, [class*=" icon-"]:last-child { *margin-left: 0; } .icon-white { background-image: url(<%= asset_path "glyphicons-halflings-white.png" %>); } ...
に変更してやればいい。
ようやく Bootstrap の画像は表示できたけど、css ファイルを erb に変更した上に、画像のパスを書き換える、というのはスマートじゃないな。将来、Bootstrap の新しいバージョンと差し替えるときに、また同じ修正をしないといけないからね…。でも、調べても他にいい方法が見つからなかったので仕方ないか。