Railsメモ【Bootstrap導入】Railsチュートリアル流

Railsチュートリアルで学んだことをメモ

今回はBootstrapの導入方法について

【参考】
・Ruby on Rails チュートリアル：実例を使って Rails を学ぼう
・第5章 レイアウトを作成する - Railsチュートリアル

Gemfileにbootstrap-sassを追加する

（バージョンは都度確認する）

[Gemfile]

source 'https://rubygems.org'

gem 'rails',     '5.1.6'
gem 'bootstrap-sass',  '3.3.7'   # 追加
.  
.  
.  

$ bundle install

カスタムCSSファイル(custom.scss)を作る

最初のうちは難しいことはしない、なるべく簡単な方法。みたいです。

$ touch app/assets/stylesheets/custom.scss

生成したファイルにBootstrapとSproketsを読み込む

[app/assets/stylesheets/custom.scss]

@import "bootstrap-sprockets";
@import "bootstrap";

以上で、Bootstrapが反映される

syntax errorとなったらサーバーを再起動する。

スタイルを追加するときは、全てcustom.scssファイルに記述する。