Docker + Rails６にbootstrapとfontawesomeを導入

この間作成した、DockerとRailsの環境にbootstrapとfontawesomeの導入をしました。

gemを使ったものではなく、yarnを使っての導入となります。

それでは、早速やってみましょう！！

必要なパッケージをインストール

$ yarn add bootstrap jquery popper.js @fortawesome/fontawesome-free

これで、OK！

インストールされたかどうかが、package.jsonで確認できます。

application.js

app/javascript/packs/application.jsに

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

を記述

enviroment.js

config/webpack/enviroment.jsに
const { environment } = require('@rails/webpacker')
var webpack = require('webpack');
environment.plugins.prepend(
   'Provide',
   new webpack.ProvidePlugin({
       $: 'jquery/src/jquery',
       jQuery: 'jquery/src/jquery',
       Popper: ['popper.js', 'default']
   })
)
module.exports = environment

を記述

これで、jQueryがいつでも呼べるようになる。

application.scss

app/javascript/stylesheets/application.scssを作成

そして、以下を記述

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

これで、完成です！！

viewでインストールされているか確かめる

適当なviewファイルに

<div class="btn btn-primary">テスト</div>

<i class="fas fa-pen"></i>

こんな感じで書いて

以下のように表示されていたら大丈夫です。

表示されない？？

もしかしたら、上記の手順でも正しく表示されない可能性があります。

その時は、chromeのdeveloper toolsでconsoleを開きます。

そこで、

Uncaught Error: Cannot find module '@popperjs/core'

こんな感じで、popperjs/coreがないよという表示が出ていたら、

$ docker-compose exec web yarn add @popperjs/core

上記のコマンドでpopperjs/core をインストールして下さい。

そうすると、解決されると思います。

まとめ

以上ざっくりまとめてみました。

何かあればコメントお待ちしております！