1. Gemfile 編集
Gemfile
.
.
.
gem 'twitter-bootswatch-rails'
gem 'twitter-bootswatch-rails-helpers'
$ bundle install
2. Bootswatch インストール
$ rails g bootswatch:install lumen
$ rails g bootswatch:import lumen
$ rails g bootswatch:layout lumen
3. Asset Pipeline の設定
app/assets/stylesheets/application.css
.
.
.
*= require_self
*= require lumen/lodader
*= require lumen/bootswatch
*/
app/assets/javascript/application.js
.
.
.
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require lumen/loader
//= require lumen/bootswatch
config/initializers/assets.rb
.
.
.
Rails.application.config.assets.precompile += %w( lumen.css )
Rails.application.config.assets.precompile += %w( lumen.js )
4. Bootswatch のファイル修正
変数 @zindex-modal-background が定義されていないとエラーが出る場合があるので変数の定義を追加。
この手順は飛ばしてエラーが出た時に作業してもOK。
app/assets/stylesheets/lumen/variables.less
.
.
.
@dl-horizontal-offset: @component-offset-horizontal;
//** Horizontal line color.
@hr-border: @gray-lighter;
@zindex-modal-background: 0;
動作確認
Bootswatchをインストールした時に作られたテンプレートで application.html.erb を上書きする。
$ mv app/views/layouts/lumen.html.erb app/views/layouts/application.html.erb
コントローラー作って
$ rails g controller StaticPage
ルーティングの設定をして
app/controllers/static_page_controller.rb
class StaticPageController < ApplicationController
def index
end
end
$ touch app/views/static_page/index.html.erb
config/routes.rb
Rails.application.routes.draw do
root 'static_page#index'
.
.
.
Webサーバー起動。
$ rails s
http://192.168.33.10/ を開くとこんな感じでBootswatchが有効になっていること確認。
