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

学習記録

はじめに

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

gemとは?

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

font-awesomeとは?

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

bootstrapとは?

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

アセットパイプラインとは?

  • アセットパイプラインとは、JavaScript、CSS、画像などのリソース(アセットと呼ぶことが多い)を効率的に扱うための仕組みです。
  • アセットパイプラインはsprockets-railsというgemによって提供されている機能です。
  • アセットパイプラインでは、開発者が書いたJavaScriptやCSSを、最終的にアプリを使う上で都合の良い状態にするためのパイプライン処理を行います。

作業の流れ

  • Gemfileに追記
  • application.scssに追記
  • application.jsに追記

Gemfileに追記

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に追記しましょう。

application.scssに追記

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

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

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

application.jsに追記

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

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

終わりに

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

参考記事

アセットパイプライン - Railsガイド
アセットパイプラインに関するドキュメントです。
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to lif...
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

コメント

タイトルとURLをコピーしました