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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です