Bootstrap3をRails4で使うときのメモ

RoR

Lessで使う場合とSass（Scss）で使う場合で設定の仕方が違うらしい。

本体

LessとSass（Scss）の違い

Less、素のCSS の場合

twitter-bootstrap-railsを使う。

Gemfileに以下を追加

gem gem 'therubyracer', platforms: :ruby # Lessを使う場合
gem "less-rails"   # Lessを使う場合
gem "twitter-bootstrap-rails"

bundleでインストール

% bundle install

less版の設定ファイル（bootstrap_and_overrides.css.less）を設置。

% rails generate bootstrap:install less

CSSを設置する場合は

% rails generate bootstrap:install static

app/views/layouts/application.html.erb を生成。

% rails generate bootstrap:layout application

生成した app/assets/stylesheets/bootstrap_and_overrides.css.less をapplicaiton.cssから読み込む。

/*
 *= require bootstrap_and_overrides
 */

lessの設定を加える場合は、bootstrap_and_overrides.css.less を編集する。

参考リンク

Sass （Scss）の場合

bootstrap-sassを使う。

Gemfileに以下を追加

gem 'bootstrap-sass', '~> 3.3.0'
gem 'sass-rails', '>= 3.2'

bundleでインストール

% bundle install

app/assets/stylesheets/applicaition.css を削除する。

% rm app/assets/stylesheets/applicaition.css

app/assets/stylesheets/applicaition.css.scss を作成する。

% touch app/assets/stylesheets/applicaition.css.scss

中身は以下のとおり。

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

参考リンク