rails4でBootstrapとBootswatchを使う

目的

railsのビューには必須のBootstrap3
更にテーマとしてBootswatchを使う
ついでにFont Awesomeも使えるようにする。

環境

Rails4.3.9

Bootstrap系のgem

1) twitter-bootstrap-rails

bootstrap系では一番ヒットするgem。
このgemはlessで使用するんだけど、
BootswatchのGemである
twitter-bootswatch-railsと併用する場合
glyphiconが表示されなくなり、あきらめた。

2) bootstrap-sass + bootswatch-rails

結局sass(scss)を使用するこっちに落ち着いた。

Gemfile

gem 'sass-rails', '~> 5.0'
gem 'autoprefixer-rails'
gem 'bootstrap-sass'
gem 'bootswatch-rails'
# FontAwesomeを使用する場合
gem "font-awesome-rails"

上記を追加し、bundle install

app/assets/stylesheets/application.cssをapplication.css.scssに変更し、
以下を記述する。
(例はbootswatchの"superhero"というテーマにしたい場合。
他のテーマに変えたい場合は"superhero"を"readable"とか"lumen"に適宜変更）

application.css.scss

@import "bootstrap-sprockets"; // これは一番上にしないとglyphiconが表示されない
@import "bootswatch/superhero/variables";
@import "bootstrap";
@import "bootswatch/superhero/bootswatch";
@import "font-awesome"; //FontAwesomeを使用する

app/assets/stylesheets/application.jsに「//= require bootstrap-sprockets」を追記する

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-sprockets

これをしないとbootstrapのdropdownとかできないので注意

他のテーマを適用させたい

例えば公式にあるテーマsolarはbootswatch-railsのgemでインストールされない。

この場合は
１）app/assets/stylesheetsにbootswatch/テーマ名（この場合はsolar)フォルダを作成。
２）その中に「_bootswatch.scss」「_variables.scss」の２つのファイルをbootswatchサイトからダウンロードし、置いておく。

あとは他のテーマと同様にapplication.css.scssにsolarの設定を書く。

application.css.scss

@import "bootstrap-sprockets"; // これは一番上にしないとglyphiconが表示されない
@import "bootswatch/solar/variables"; //solarの設定
@import "bootstrap";
@import "bootswatch/solar/bootswatch"; //solarの設定
@import "font-awesome"; //Font Awesomeを使用する