RailsにSass用のBootstrapを導入する方法です。
インストールについての公式情報：https://github.com/twbs/bootstrap-sass
Step1. Gemのインストール
Gemfileを開き、sass-rails とbootstrap-sass を追加し、インストールします。
gem 'bootstrap-sass' gem 'sass-rails'
$ bundle install
Step2. Assetsの追加
RailsのアセットパイプラインにBottstrapを追加します。
app/assets/stylesheet/application.cssをapplication.scssにリネームし、bootstrap-sprocketsとbootstrapを追加します。bootstrap-sprocketsはbootstrapよりも先にimportする必要があります。
@import "bootstrap-sprockets"; @import "bootstrap";
app/assets/javascript/application.jsを開き、bootstrap-sprocketsを追加します。
//= require bootstrap-sprockets
以上で、生成されるHTMLにbootstrapのスタイルシートが追加されます。
Step3. Bootstrap変数の使用
Bootstrapにはいくつもの変数が定義されています。scss内で既定の変数を使用する場合は次のようにbootstrapを呼び出してから使います。
@import "bootstrap";
使用可能な変数一覧はLess用ですがこちらにあります。Sassで使う場合は@を$に置き換えて使います。
例えばカラーの @brand-success を使う場合は次のように $brand-success として使います。
h1 {
color: $brand-success;
}
bootstrapをimportしていないと、次のように怒られます。
Undefined variable: "$brand-success".Step4. Viewportの設定
Viewportを設定したい場合はつぎのようにします。
app/views/layouts/application.html.erbを開き、viewportを追加します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
重要なポイント
Railsのアプリケーション名をbootstrapにしていると、bootstrap-sass gemを追加してrailsコマンドを実行すると次のようなnameエラーが発生します。
`<module:Bootstrap>': uninitialized constant Bootstrap::Rails::Application (NameError)