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

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

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

[Rails6.0] Rails6 + yarn + webpacker でMaterial Design for Bootstrapを導入する - Qiita

Rails6 Material Design for Bootstrapを使用する手順 | mebee

Rails6 で Material Design for Bootstrap を使う | url4u.jp

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

$ 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に出会う。そのものズバリの内容でした。いいねがたくさんついてる解決法を実施するとうまくいきました！

github.com

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は反映されます。

反省

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

参考文献