[Rails4]Bootstrap導入とassets:precompileでglyphiconが表示されない不具合対応

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

Rails4にBootstrapを導入するのは、とても簡単です。
だが、いざ本番環境にデプロイしたら、glyphiconが表示されないという不具合に見舞われました。
自分がベストだと思う導入方法と対処方法をメモします。
対象バージョンはbootstrap-sass-3.2.0.0です。バージョンアップで解消される事を期待したい。

●Bootstrapを追加

turbolinksと相性が悪いらしいので、turbolinksを外してbootstrap-sassを追加します。

編集：Gemfile

# gem 'turbolinks'

# Use Bootstrap
gem 'bootstrap-sass'

$ bundle install =========================================== Installing bootstrap-sass 3.1.1.1 =========================================== ※「Your bundle is complete!」と表示されればOK

●Bootstrapの適用順番を明示

JSとCSSは、デフォルトだと名前順に適用されるので、先に読まれるように明示します。
aとかで始まる名前のJS/CSSだとBootstrapの設定を上書けない為です。(CSSは後勝ちなので)

編集：app/assets/javascripts/application.js

//= require turbolinks
//= require bootstrap

編集：app/assets/stylesheets/application.css

 *= require bootstrap
 *= require_tree .
 *= require_self

●assets:precompileでglyphiconが表示されない不具合対応

本番環境ではassets:precompileして、public/assets以下をApacheから直接返すようにしていますが、gems/bootstrap-sass-3.2.0.0/assets/stylesheets/bootstrap/_glyphicons.scssで「url(」と定義されている為、precompile時にcssにハッシュ値が入らず、アイコンが表示できません。
SCSSで画像などを表示するには「image-url(」と定義して、Railsに変換してもらう必要があります。開発環境では「url(」でも表示されるので、開発段階では気付き難いので厄介です。

作成：app/assets/stylesheets/bootstrap_override.scss

//### assets:precompileでglyphiconが表示されない不具合対応 ###
@font-face{
  font-family:'Glyphicons Halflings';
  src: image-url("bootstrap/glyphicons-halflings-regular.eot");
  src: image-url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
       image-url("bootstrap/glyphicons-halflings-regular.woff") format("woff"),
       image-url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),
       image-url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg")
}

編集：app/assets/stylesheets/application.css

 *= require bootstrap
 *= require bootstrap_override