基礎課題3

2021.2.25

*gemを使用して、font-awesome、bootstrapをそれぞれインストール後、使用できるように設定

バージョンはこのサイトで調べられる。

RubyGems.org | your community gem host

 

<font-awesome5(最新版対応)> (Rails5に導入するとき)

❶ Gemfileにgemを追加する。

(Gemfile)

gem 'font-awesome-sass' バージョン

 

❷ bundle install を実行する

 

❸ (app/assets/stylesheets/application.scss)に@importで追記する。

    *application.cssを使用している際は、scssに変換する。

順番を入れ替えてしまうと、アイコンが表示されないので注意。

(app/assets/stylesheets/application.scss)

@import 'font-awesome-sprockets';

@import 'font-awesome';

 

<bootstrap>

❶ Gemfileにgemを追加

(Gemfile)

gem 'bootstrap' , '~> 4.4.1'(←バージョン)

gem 'jquery-rails' (Rails5.1以上を利用しているときのみ追記)

*Bootstrap JavaScriptJQueryに依存しているので、Rails 5.1以上を利用している場合は、jquery-rails gemをGemfileに追記する必要がある。

 

 

❷sprockets-rails gemがv2.3.2以上であることを確認する。

(ターミナル)

$ bundle show |fgrep sprockets-rails

 

❸ bundle install を実行する

マニフェストファイル(アプリの設定が書かれたファイル)である(app/assets/stylesheets/application.scss)に読み込ませる。拡張子が.scssになっているか確認しとく。

(app/assets/stylesheets/application.scss)

@import "bootstrap";

 

❺Bootstrapのツールチップ機能とポップオーバー機能はpopper_jsに依存していて、Bootstrap gemはpopper_jsに依存しているので、マニフェストファイルであるapplication.jsに次のように書き加える。

(application.js)

//= require jquery3

//= require popper 

//= require bootstrap-sprockets

 

*注意

//= require jquery3よりも前に //= require_tree . を記載するとエラーになるケースがあるので注意。//= require_tree . は一番最後でいい。

 //= require_tree .で読み込んだファイルでjqueryのコードを参照していると jquery3が読み込まれる前に評価されるためメソッドが未定義となりエラーになる場合がある。