Bootstrapとfont-awesomeをRailsにインストールするやり方 GitHubを参考に

はじめに

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になっているか確認しとく。

application.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に次のように書き加える。

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になっています）

application.scss

@import "font-awesome-sprockets";
@import "font-awesome";

font-awesome-sprocketsファイルには、フォントファイルへのパスを見つける機能が入っています。

#最後に
application.scssに読み込ませる際には、行末に;を忘れないでください！
；ではないです。大量のログを前に、筆者はこのミスを発見するのに1時間くらい費やしました。VScodeのサジェストがあったにもかかわらず、、、僕のようにはならないでください。

読んでくださり、ありがとうございます。

#参考文献
GitHubのfont-awesomeインストール方法案内ページ
GitHubのBootstrapのインストール方法案内ページ