Rails Bootstrap(グリッドオプション(col- col-smなど)), font-awesome(gem)の設定
課題の中で勉強した内容をアウトプットします。
●bootstrap
●Gemfileに下記を記載
gem 'bootstrap', '~> ヴァージョン入れる'
gem 'font-awesome-sass', '~> ヴァージョン入れる'
- 公式のgemのREADMEでバージョン指定があれば設定しておきましょう ※ 指定のバージョンが更新されていれば、新しいバージョンで指定してください。※公式gemを検索するには下記サイト参照
-
また
gem 'font-awesome-rails'では、font-awesome5系に対応していないのでgem 'font-awesome-sass'を使用する必要があります。 - またjqueryについては下記サイトを参照
●application.scssに下記を記載
@import 'bootstrap';
@import 'font-awesome-sprockets';
@import 'font-awesome';
※ scssファイルには*= requireなどのSprocketsディレクティブの記載が残っていると、@importで定義した内容がうまく読み込めずbootstrapが反映されないので注意してください。
●application.jsに下記を記載
//= require jquery3
//= require popper
//= require bootstrap-sprockets
※//= require_tree . は一番下の行に記載していること ※ ここではrequireするJavaScriptファイルの順番に注意してください。
※//= require jquery3よりも前に//= require_tree .を記載した場合、 //= require_tree .で読み込んだファイルでjqueryのコードを参照しているとjquery3が読み込まれる前に評価されるためメソッドが未定義となりエラーになるケースが後の課題で発生します。
