RailsではyarnによりJS/CSSのパッケージ管理が出来るようになっています。Gemを使わずにBootstrapとfont-awesomeを使えるように設定していきます。

webpackerはすでにインストール済みです。

webpackerをインストールしたときにapp以下にjavascriptディレクトリが生成されました。今回初めてrails6系を使用したので、とても驚きました。

基本的にwebpackerでビルドするJS/CSSを配置しているようです。今はまだCSSを配置するためのディレクトリがないので、app/javascript以下にsrcというディレクトリを作成します。そしてそのディレクトリの中でapplication.scssを作成します。

Sayo-MacBook-Pro:emoji_diary SAYO$ mkdir app/javascript/src
Sayo-MacBook-Pro:emoji_diary SAYO$ touch app/javascript/src/application.scss

Bootstrapの導入

yarnコマンドでBoostrapのライブラリを取得します。Bootstrap4系のJSはjQueryとpopper.jsに依存しているので、それらのJavaScriptのファイルも同時に取得します。

Sayo-MacBook-Pro:emoji_diary SAYO$ yarn add [email protected] jquery popper.js
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
warning [email protected]: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 7.13s.

BootstrapのJSをapp/javascript/packs/application.jsで、CSSでapp/javascript/src/application.scssでインポートします。

なお、Webpackerはビルドの際app/javascript/packsの中だけを参照するので、application.scssがビルドされるようにapplication.jsでインポートしておきます。

import 'bootstrap'
import '../src/application.scss'

@import '~bootstrap/scss/bootstrap';

Font-Awesomeの導入

yarnコマンドでFont-Awesomeを取得します。

Sayo-MacBook-Pro:emoji_diary SAYO$ yarn add @fortawesome/fontawesome-free
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @fortawesome/[email protected]
info All dependencies
└─ @fortawesome/[email protected]
✨  Done in 8.12s.

こちらもJS/CSSをインポートします。

import 'bootstrap'
import '@fortawesome/fontawesome-free/js/all'
import '../src/application.scss'

@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';