[Rails] gemを使ってbootstrapとfont-awesomeを導入する

はじめに

gemをインストールして、font-awesomeとBootstrapを適用させてみましょう。

Ruby用の公開されているライブラリのことです。これらを利用することで生産的に開発をすることができます。

ビューファイルでアイコンを表示できるようにするwebサービスです。

CSSのフロントエンドフレームワークのことです。すべてのスタイルを一からデザインしてCSSを書くのは大変です。Bootstrapを使うことで整ったページデザインが簡単に作成できます。

Gemfileに追記しましょう。

gem 'font-awesome-sass', '~> 5.12.0'
gem 'bootstrap', '~> 4.4.1'
gem 'jquery-rail'

font-awesome5系のを使いたい場合はfont-awesome-sass を追記します。

bootstrap4系を使うのでバージョン指定しましょう。

BootstrapはjQueryに依存するため、Rails5.1以上ではjquery-railsもGemfileに追記しましょう。

@import 'bootstrap';
@import 'font-awesome-sprockets';
@import 'font-awesome';

@import 'font-awesome'; より @import 'font-awesome-sprockets'; を先に書かないといけないことに注意しましょう。

scssファイルには*= require などのSprocketsディレクティブの記載が残っていると、@import で定義した内容がうまく読み込めずbootstrapが反映されないので注意しましょう。

//= require jquery3
//= require popper
//= require bootstrap-sprockets

//= require_tree . は一番下の行に記載するようにします。

アセットパイプラインは初心者には難しい概念なのでしっかり身につけましょう。