Rails6 にBootstrapとJQueryとMaterial design for bootstrap 4をwebpackerで導入したメモ

こんにちは、たわらです。

先日からポートフォリオの制作に着手しました。Rails new をしてとりあえずフロントまわりに必要なものを導入した際の手順をまとめる記事です。

先人の知恵を借りたけどできなかった

https://qiita.com/sasakura_870/items/38e17d95d9497cf81413

https://mebee.info/2020/08/06/post-15232/

https://url4u.jp/rails6-material-design-for-bootstrap/

このあたりのブログを参考に導入をしてみた。

$ yarn add bootstrap bootstrap-material-design jquery popper.js

で、必要なファイルをインストールする。

下記のようにエントリーファイルを作成する。

# app/javascript/pack/application.js
import 'bootstrap-material-design'
import '../stylesheets/application'

css を配置するディレクトリとファイルを作成する。

$ mkdir app/javascript/stylesheets
$ touch app/javascript/stylesheets/application.scss

作成したapplication.scssに以下のコードを追加する。

@import '~bootstrap-material-design/scss/bootstrap-material-design';

そしてレイアウトファイルでエントリーファイルを読み込むように下記のコードを記載。（turbolinks は使ってません）

= stylesheet_pack_tag 'application', media: 'all'
= javascript_pack_tag 'application'

Material design for bootstrap 4 が利用できない

ここまでの手順ではどうしてか Material design for bootstrap 4 が反映されていませんでした。ただの bootstrap です。特にエラーもありません。

なんでかなーと思って公式を確認すると、どうやら Material design for bootstrap 4 のバージョンが違うようでした。

$ yarn add bootstrap bootstrap-material-design jquery popper.js

のやり方だとバージョン4.1.3になっていました。

しかし公式を見てみると、

npm install bootstrap-material-design@4.1.1

と書いてあります！

https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/download/

なので、公式にならってインストールします。これでpackage.jsonにてバージョンが4.1.1に変更されます。

すると、下記のエラーがはじめて出てきました。とにかく進んでるっぽいですね。

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):    @include form-validation-state("valid", $label-color);
            ^
      Mixin form-validation-state is missing argument $icon.
      in /Users/kentaroutawara/programing/nisatume/nisatume/node_modules/bootstrap-material-design/scss/mixins/_forms.scss (line 159, column 14)
Error:
    @include form-validation-state("valid", $label-color);
            ^
      Mixin form-validation-state is missing argument $icon.
      in /Users/kentaroutawara/programing/nisatume/nisatume/node_modules/bootstrap-material-design/scss/mixins/_forms.scss (line 159, column 14)
    at options.error (/Users/kentaroutawara/programing/nisatume/nisatume/node_modules/node-sass/lib/index.js:291:26)

で、エラー箇所の

Mixin form-validation-state is missing argument $icon.

で試しにググってみると、別の repo の issue に出会う。そのものズバリの内容でした。いいねがたくさんついてる解決法を実施するとうまくいきました！

https://github.com/creativetimofficial/material-kit/issues/154

node_modules/bootstrap-material-design/scss/mixins/_forms.scssの 159 行目を

@include form-validation-state("valid", $label-color);

から

@include form-validation-state("valid", $label-color, "none");

に変更します。

この変更による影響範囲は正直把握しきれませんが、これで Material design for bootstrap 4 は反映されます。

反省

何はともあれ公式を読んでみることは大事です

参考文献

https://qiita.com/sasakura_870/items/38e17d95d9497cf81413

https://mebee.info/2020/08/06/post-15232/

https://url4u.jp/rails6-material-design-for-bootstrap/

https://fezvrasta.github.io/bootstrap-material-design/docs/4.0/getting-started/download/