More than 5 years have passed since last update.

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

Last updated at 2018-08-01Posted at 2018-07-31

目的

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

条件

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

手順リスト

Gemfileに追加する
application.scssに追加
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」が残ったままの方がたまにいるので、ある場合は削除してくだいさい。