はじめに
Railsにデザインを整えるBootstrapとアイコンを使えるようになるfont-awesomeのgemを導入する方法を紹介します。それぞれのgemのGitHubのページを参考にしました。
Bootstrapの導入方法
まずGemfileにgemを追加します。
gem 'bootstrap', '~> 4.4.1'
sprockets-rails gem がv2.3.2以上であることを確認しておいてください。
次に、bundle insallを実行して、サーバーを再起動します。
次はマニフェストファイルであるapp/assets/stylesheets/application.scssに読み込ませます。拡張子が.scssになっているか確認しとく。
@import "bootstrap";
Bootstrap JavaScriptはJQueryに依存しているので、Rails 5.1以上を利用している場合は、jquery-rails gem をGemfileに加える必要があります。
gem 'jquery-rails'
Bootstrapのツールチップ機能とポップオーバー機能はpopper.js に依存していて、Bootstrap gemはpopper_jsに依存しているので、マニフェストファイルであるapplication.jsに次のように書き加える。
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery3よりも前に//= require_tree .を記載するとエラーになるケースがあるので注意する。//= require_tree .で読み込んだファイルでjqueryのコードを参照しているとjquery3が読み込まれる前に評価されるためメソッドが未定義となりエラーになる場合がある。
font-awesomeの導入方法
まずはGemfileに追加する。
gem 'font-awesome-sass', '~> 5.12.0'
で、bundle insallをする。
font-awesomeをマニフェストファイルであるapp/assets/stylesheets/application.scssに読みこませる。（ここではscssを利用しているので、拡張子がscssになっています）
@import "font-awesome-sprockets";
@import "font-awesome";
font-awesome-sprocketsファイルには、フォントファイルへのパスを見つける機能が入っています。
最後に
application.scssに読み込ませる際には、行末に;を忘れないでください！
；ではないです。大量のログを前に、筆者はこのミスを発見するのに1時間くらい費やしました。VScodeのサジェストがあったにもかかわらず、、、僕のようにはならないでください。
読んでくださり、ありがとうございます。
参考文献
GitHubのfont-awesomeインストール方法案内ページ
GitHubのBootstrapのインストール方法案内ページ