私的メモ
今度もう少しわかりやすいように書き直す予定
実行環境
cloud9
rubyRails 4.2.5
ruby 2.3.0p0
bootswatchのインストールの流れ
やる内容によって作業ルートが変わります。
既存のapplication.htmlerbを使って1から作り上げていく用
1→2→3-1→4-1→5
予めテーマで用意されたレイアウトをドンっと使う場合
1→2→3-2→4-2→5
1. Gemへの追記
Gemfileに必要なものを追記する。
#bootswatch用
gem 'twitter-bootswatch-rails', :github => 'scottvrosenthal/twitter-bootswatch-rails'
gem 'therubyracer'
gem 'execjs'
からの
bundle install
Important:You may need to add a javascript runtime to your Gemfile in order for bootstrap's LESS files to compile to CSS.
と、表示されたら
gem install execjsとコンソールに打ち込む
2. boostwatchのインストール
下のコマンドを打っていく。
1つめのコマンド:[theme_name]の箇所は適用させたいbootswatchのテーマ
2つめのコマンドは、viewsのlayoutsに[theme_name].html.erbと生成される。
注1※これは、layoutフォルダに生成される、[theme_name].html.erbを、application.html.erbに代わり使用するためで、そのまま既存のapplication.html.erbを使用、もしくは1からレイアウトを自分で作り上げていく場合は不要。
3つめのコマンドは実行後、ファイルの上書きを聞かれるので「y」を入力
4つ目のコマンドは、scaffoldでモデルを作った人だけ。[RESOURCE_NAME]はscaffoldモデル名で、コマンド実行後はファイルの上書
き確認されるので「y」入力して許可する
>rails g bootswatch:install [theme_name]
>rails g bootswatch:layout [theme_name]
>rails g bootswatch:import [theme_name]
>rails g bootswatch:themed [RESOURCE_NAME]
例:rails g bootswatch:install journal
3-1. application.cssの変更 (既存application.html.erbを使う場合のみ)
注1.で述べたようにそのままapplication.html.erbを使用する場合にのみ行う。
これをしないと、application.html.erbでテーマが適用されない。
require_selfの後に3行目と4行目を追記。[theme_name]は選んだテーマ名に変更
*
*= require_self
*= require [theme_name]/loader
*= require [theme_name]/bootswatch
*/
例:require journal/bootswatch
追記.application.cssでエラー「couldn't find file '[theme_name]/bootswatch' with type 'text/css'と表示されapplication.cssの[theme_name]を全部小文字にしたら治った.
年のために、application.jsも同じようにしたほうがいいのかな？
4-1. application.jsの変更 (既存application.html.erbを使う場合のみ)
注1.で述べたようにそのままapplication.html.erbを使用する場合にのみ行う。
これをしないと、application.html.erbでテーマが適用されない。
application.jsを開いて以下、2行を追記。
//= require [theme_name]/loader
//= require [theme_name]/bootswatch
3-2. Applicationコントローラーの変更(layoutした人だけ)
これは、最初にrails g bootswatch:layout [theme_name]でlayoutを丸々作った人だけ行います
application_controller.rbに以下追記
layout '[theme_name]'
class ApplicationController < ActionController::Base
# ...
layout 'journal'
end
4-2. assetsの変更(layoutした人だけ)
config/initializers/assets.rbに最終仕上げとして2行最後に追記
Rails.application.config.assets.precompile += %w( [theme_name].css )
Rails.application.config.assets.precompile += %w( [theme_name].js )
.省略
.
Rails.application.config.assets.precompile += %w( journal.css )
Rails.application.config.assets.precompile += %w( journal.js )
5. 仕上げ
で、あとはサーバーの再起動で動くはず。2016年5月27日現在