Rails5にBootstrapとFont Awsomeを導入するときの設定手順

RailsアプリケーションにBootstrapとFont Awsomeを導入するときの初期設定のメモを残しておきます。
導入のときに何度か手こずったので、2度と手こずらないように!

Gemfile

まず、Gemfileに下記のGemを入れます。

gem "font-awesome-rails"
gem 'font-awesome-sass'

gem 'bootstrap', '~> 4.1.1'
gem 'rails-ujs'
gem 'jquery-rails'
gem 'sass-rails', '~> 5.0'

そして、bundle installします。

application.scssとapplication.js

そして、application.scssとapplication.jsで、BootstrapとFont Awsomeのファイルが読み込まれるように設定します。

application.scssは記述されていたものを削除してから下記ディレクティブを上書きします。

@import "bootstrap";
@import 'style';

application.jsは、元から記述されていた内容に下記を追記します。

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

Viewファイルから読み込むマニフェストファイルを指定

最後に、viewファイル(erbファイル)のhead内でマニフェストファイル(application.scssとapplication.js)を読み込むように記述します。jqueryのライブラリとFont Awsomeのcssファイルの読み込み先も同時に指定します。共通layoutファイルのapplication.htmlなどに書くことになるでしょう。


<%= stylesheet_link_tag    'application', media: 'all',data-turbolinks-track" => reload %>
<%= javascript_include_tag 'application',data-turbolinks-track" => reload %>

Rials5にBootstrapとFont Awsomeを導入するときは、まずこのブログの作業を行ってから作業することにします。

参考

シェアする

  • このエントリーをはてなブックマークに追加

フォローする