awesome Gemとbootstrap Gemの注意事項

gemの注意事項

・Gemは、コメントなどで区切りのない段落では、gemの記載はアルファベット順にした方が良い。

ex)

[Gemfile]

gem 'bootstrap', '~> 4.4.1'
gem 'font-awesome-sass', '~> 5.12.0'
gem 'jquery-rails'

[font-awesome]Gemの使い方
rails5系とrails6系ではfontawesomeの導入の仕方が異なります。

[rails5系に導入する方法]
Gemgileに下記のように追加する。

[Gemfile]

gem "font-awesome-sass"

↓

$ bundle install

↓

[app/assets/stylesheets/application.scss]に下記のように追加する。
※[application.css]になっている場合は、[application.scss]に変換。

[app/assets/stylesheets/application.scss]

@import 'font-awesome-sprockets';
@import 'font-awesome';

※注意
下記のように順番を入れ替えて記述するとアイコンが表示されなくなる。

[app/assets/stylesheets/application.scss]

@import 'font-awesome';
@import 'font-awesome-sprockets';

[bootstrap]Gemの使い方
Gemfileに以下のように追加する。

[Gemfile]

gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

※BootstrapはjQueryに依存するため、(デフォルトでjQueryがインストールされない)Rails5.1以上ではjquery-railsもGemfileに追記する必要がある。

↓

$ bundle install

※注意
sprockets-railsがv2.3.2.以上である必要がある。
sprockets-railsのバージョン確認は、以下で可能。

$ bundle show |fgrep sprockets-rails
  * sprockets-rails (3.2.1)

↓

[app/assets/stylesheets/application.scss]に下記のように追加する。
※[application.css]になっている場合は、[application.scss]に変換。

[app/assets/stylesheets/application.scss]

@import "bootstrap";

※注意 ・scssファイルには、*= requireなどのSprocketsディレクティブの記載が残っていると、@importで定義した内容がうまく読み込めずbootstrapが反映されない

↓

bootstrapとの依存関係を[app/assets/javascripts/application.js]に下記のように追加する。(Webアプリケーションではスタイル関連にJavaScriptが使われるのが一般的でありRailsやBootstrapも同様。そのため、JavaScript の設定についても、Rails標準の設定からBootstrap用に変更しなければいけない為。)

[app/assets/javascripts/application.js]

//= require jquery3
//= require popper
//= require bootstrap-sprockets

※注意
上記の追加するコードは、下記のように[//= require rails-ujs],[//= require turbolinks],[//= require_tree .]より上に追加しなければいけない。

[app/assets/javascripts/application.js]
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require activestorage
//= require_tree .