前回Railsの新しいプロジェクトにBootstrapを使えるように設定した後、Bootswatchのthemeも適用しよ〜としたら、色々エラーがあってハマった件。
こちらのURLを参考に、ごにょごにょしました。
参考：Bootstrap/BootswatchをRails 4.1に導入！ - 酒と泪とRubyとRailsと
仕切りなおす
またわけがわからなくなるので、新しいプロジェクトを作る。
前回のGemfileだと、lessとsassがごちゃ混ぜになって変なエラーが沢山出て、素人の手に負えなったため。。
sassしか記法覚えてないけど、sassにする方が難しそう（ていうか今の知識レベルではムリ）なので、大人しくlessのみにする方針に決定。
$ mkdir bootest
$ cd bootest
$ bundle init # Gemfileのひな形作成
$ mvim Gemfile
Gemfile編集
rails new でデフォルト作成されるGemfileをちょっと修正。
- therubyracerのコメントを外す。
Twitter bootstrap関連でlessが導入されて、ないとエラーになるので。
- sass-railsはとりあえずコメントアウトしておく。
残ってても大丈夫っぽかったけど、変なエラーが出て回避出来なかった覚えがあるので・・
$ mvim Gemfile
source "https://rubygems.org"
# 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'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring', group: :development
# ここから追加
# Twitter Bootstrap
gem 'twitter-bootswatch-rails', '~> 3.1.1'
gem 'twitter-bootswatch-rails-helpers'
# hamlでやりたい人はこれも
gem 'haml-rails'
これでbundle install
$ bundle install --path vendor/bundle
Rails new
まだRailsのプロジェクトの形になっていないので、以下を実行。
$ bundle exec rails new . -T
これでカレントディレクトリがRailsプロジェクトになる。
Gemfileは既にあるので、コンフリクトするけど、さっき作った方を残したいのでnで。
hamlの設定
面倒なのでerbのまま進めようかと思ったけど、この後のコマンドで大量にerbファイルが作られるので、せっかくだからhamlで作ってくれるように設定する。
config.generators do |g|
g.template_engine :haml
end
Bootswatchの初期設定
ここからは参考サイトのまま。
適用するtheme名は"flatly"にしてみます。
Bootswatch: Free themes for Bootstrap
$ bundle exec rails g bootswatch:install flatly
$ bundle exec rails g bootswatch:import flatly
$ bundle exec rails g bootswatch:layout flatly
これで出来上がったerb(haml), css, javascriptを
app/views/layouts/application.haml(erb).html
に移植して使うなり、デフォルト側にコピーして使うなりすればOK
・・・とのことですが、Rails素人はここでまたハマりました。。
（読み込ませ方がわからなくて、flatly.css, flatly.jsの中身をそのままapplication.*にコピペしたりして、なんかおかしくない？とかやってました・・・←間違いだとさっき気づいた）
出来上がったcssを読み込ませる
先ほどのbootswatch:installでflatly.cssやらができているので、そいつをapp/assets/stylesheets/application.cssから読み込めるようにする。
もともと書いてあるrequire_selfの下に1行追加するだけでOK
*= require flatly
出来上がったjavascriptを読み込ませる
同じく。元々書いてある読み込みの一番下に、以下を追記。
//= require flatly
それぞれのflatly.css, flatly.jsに実際に必要なスタイルやらスクリプトの読み込み部分が記載されているので、application.*からは対応するファイルの拡張子なし名（この場合はflatly）をrequireすればよかった・・と。
この辺はRailsの基礎なんだろうな。。だから書いてなかったんだな・・（涙）
application layoutを変更
layoutをさっきのgeneratorが作ってくれたflatly.html.hamlでapplication.html.hamlを上書き。
$ mv app/views/layouts/flatly.html.haml app/views/layouts/application.html.haml
確認のためscaffold
このままではデフォルトのWelcomeページが出てしまうので、scaffoldする。
scaffoldしたリソースにBootstrapを適用
$ bundle exec rails g scaffold Post title:string content:text
$ bundle exec rake db:migrate
$ bundle exec rails g bootswatch:themed Posts -f
前回のオリジナルBootstrap版とほぼ同じコマンドで実行出来て素晴らしい！さすが。。
scaffoldしたviewを上書きさせるために-fをつける。
付けなくても一個ずつyで上書き確認でもOK
確認
サーバーを起動させて。
$ bundle exec rails s
ブラウザから確認
追記
variable @zindex-modal-background is undefined エラーが発生する
久々に新しいRails appで試したら、エラーが。。
環境
$ rails -v
Rails 4.2.0
$ gem list twitter-bootstrap
*** LOCAL GEMS ***
twitter-bootswatch-rails (3.2.0.0)
twitter-bootswatch-rails-helpers (3.2.0.0)
$ bundle exec rails g bootswatch:install flatly
をやると、variable @zindex-modal-background is undefineが出てくる。
回避策
@zindex-modal-background: 0;
↑コレを追記すればOK。