[初学者]RailsにBootstrap4+Font Awesome 5の導入手順

目的

• Qiitaに記事に大まかな流れをテンプレート化しておき、作業効率を上げる。
• 今後、railsを学ぶ方に向けての参考に役立てる。

条件

• ruby 2.5.1
• rails5.2
• Bootstrap : 4.1.3
• Font Awesome : 5.2.0

手順リスト

1. Gemfileに追加する
2. application.scssに追加
3. application.jsに追加

1. Gemfileに追加する

Gemfile

gem 'bootstrap', '~> 4.1.3' # 記事下の関連URLからバージョンを確認して導入
gem 'jquery-rails'
gem 'font-awesome-sass', '~> 5.2.0' # 記事下の関連URLからバージョンを確認して導入

インストール

# Gemfileに追記したやつをインストールする
bundle install

2. application.scssに追加

まず、app/assets/stylesheets/application.cssのファイル名(拡張子)をapp/assets/stylesheets/application.scsに変更する

ファイル名を変更

# 下記コマンドでファイル名(拡張子:.scss)に変更できます。
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

次に、app/assets/stylesheets/application.scssに読み込み設定を行います。

app/assets/stylesheets/application.scss

# 以下を追記する
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

3. application.jsに追加

app/assets/javascripts/application.js

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap
//= require turbolinks
//= require_tree .

//= require jquery」が残ったままの方がたまにいるので、ある場合は削除してくだいさい。

関連URL

github / bootstrap-rubygem
github / font-awesome-sass
github / jquery-rails
Font Awesome 5.2