bootstrap-sass gem で Rails で快適に Bootstrap を使う
Bootstrap はちょくちょく version があがっています。Bundler 管理にすることでより簡単に新 version に追従したり asset 配信するために bootstrap-sass gem を使ってみます。*1 すでに Sass で構築された Rails Application に親和性が高いです。
Gemfile
Rails で sass を利用するために sass-rails gem を使うことが出来ますが、boostrap-sass も依存するので、sass-rails をすでに追加していることを確認します。また、vendor prefix を自動的につけてくれる autoprefixer-rails *2 も一緒に使うことを推奨しています。bootstrap-sass を新規に導入する場合は、Rails 4.x 以降である必要があります。
gem 'bootstrap-sass', '~> 3.3.1' gem 'sass-rails', '>= 3.2' gem 'autoprefixer-rails'
Bundler 実行
Gem file に追加後、bundle 実行し、Web Server を再起動しておきます。
$ bundle
application.css.scss
今回新たに sass-rails を導入するなど、Rails 環境最初に構築した時に app/assets/stylesheets/application.css という sass を意識しない拡張子になっている場合は app/assets/stylesheets/application.css.scss にリネームするなり再生成しておきます。
asset pipeline の順番として bootstrap-sprockets が bootstrap よりも先に load するようにします。vendor/ 以下に bootstrap の実態を設置する必要はありません。
@import "bootstrap-sprockets"; @import "bootstrap";
application.js
asset pipeline の順番として jquery の後に bootstrap-sprockets を load するようにすれば完成です。
//= require jquery //= require bootstrap-sprockets
