読者です 読者をやめる 読者になる 読者になる

Rails で assets に Twitter Bootstrap を配置してみた

rails

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 の新しいバージョンと差し替えるときに、また同じ修正をしないといけないからね…。でも、調べても他にいい方法が見つからなかったので仕方ないか。

追記

vendor/assets 下に bootstrap/css と bootstrap/js と bootstrap/img を配置して、application.css

/*
 *= require ../../../vendor/assets/bootstrap/css/bootstrap
 *= require_self
 *= require ../../../vendor/assets/bootstrap/css/bootstrap-responsive
 *= require_directory .
 */

って書けば、わざわざ erb にしなくても Bootstrap が使えた。