Rails 4.0 + Bower + Twitter Bootstrap 2.3

新しく、Rails 4 + Bower + Bootstrap 3 + Font Awesome 4 というものを書きました。

Bower で Twitter Bootstrap を取得すると、css ファイルではなく less ファイルになります。
これを Rails 4.0 のアプリ（3.2 でも同様だと思いますが）で使用するためは、いくつかの設定が必要だったので、記します。

前提項目

• bower のインストール等々についてはほかの記事を参照してください。
• bower で管理されるものは RAILS_ROOT/vendor/assets/bower_components/ 以下に保存されることとします。

Gem のインストール

less-rails をインストールします。これは less を asset-pipeline で扱うために必要です。
less-rails の依存関係には含まれていませんが、実行時には therubyracer が必要なようなので一緒にインストールします。

gem 'therubyracer', platforms: :ruby
gem 'less-rails'

application.rb の設定

このまま application.css 等で Bootstrap の less ファイルを読み込もうとすると @import でエラーが発生します。@import 内がそのファイルを基準とした相対 PATH で設定されているためです。
このため config.less.paths を設定します。

application.rb

class Application < Rails::Application
  config.less.paths << Rails.root.join('vendor/assets/bower_components/bootstrap/less')
end

application.css の設定

上記設定ができてしまえば RAILS_ROOT/vendor/assets/bower_components/ を基準として、下記のように読み込むことが可能です。

application.css

/*
 *= require_self
 *= require bootstrap/less/bootstrap
 *= require bootstrap/less/responsive
 *= require etc…
 */

application.js の設定

Javascript も同様に読み込むことが可能ですが、とりあえず app/assets/javascripts/bootstrap.js というファイルを作成し、下記のようにまとめて読み込むことにしました。
require_tree がうまく行きませんでした。

bootstrap.js

//= require bootstrap/js/bootstrap-transition
//= require bootstrap/js/bootstrap-alert
//= require bootstrap/js/bootstrap-modal
//= require bootstrap/js/bootstrap-dropdown
//= require bootstrap/js/bootstrap-scrollspy
//= require bootstrap/js/bootstrap-tab
//= require bootstrap/js/bootstrap-tooltip
//= require bootstrap/js/bootstrap-popover
//= require bootstrap/js/bootstrap-button
//= require bootstrap/js/bootstrap-collapse
//= require bootstrap/js/bootstrap-carousel
//= require bootstrap/js/bootstrap-typeahead
//= require bootstrap/js/bootstrap-affix

application.js

//= require bootstrap