railsでbootswatchを使う

bootswatchを使いたいところでハマったのでメモを残しておく。 まず、適当なプロジェクトを作る。

$ rails new hoge-project

続いて、Gemfileを変更する。

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
- gem 'coffee-rails', '~> 4.0.0'
+ # gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
- # gem 'therubyracer',  platforms: :ruby
+ gem 'therubyracer',  platforms: :ruby

### 省略
+ # Twitter Bootstrap
+ gem 'twitter-bootswatch-rails', '~> 3.1.1'
+ gem 'twitter-bootswatch-rails-helpers'

変更したら、bundle updateとbundle installを実行する。 その後、以下ファイル(config/initializers/assets.rb)を作成しておく。

Rails.application.config.assets.precompile += %w( flatly.css )
Rails.application.config.assets.precompile += %w( flatly.js )

※このファイルが無いと、rails g bootswatch:install で転ける。

その後、以下コマンドを実行する。flatlyは任意のテーマ名。

$ rails g bootswatch:install flatly
$ rails g bootswatch:layout flatly
$ rails g bootswatch:import flatly

js/cssでテーマを読み込むように以下変更を加える。 app/assets/stylesheets/application.css

-  *= require_tree .
+  *= require flatly/loader
+  *= require flatly/bootswatch

app/assets/javascripts/application.js

- //= require_tree .
+ //= require flatly/loader
+ //= require flatly/bootswatch

app/controllers/application_controller.rb

  protect_from_forgery with: :exception
+  layout 'flatly'

最後に適当なページを作成して、テーマが反映できているか確認する。

$ rails g controller page test
$ rails s