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