bootstrap-material-designを使ったビューをLaravelでビルドしようとするとエラーが発生する件

Bootstrapをマテリアルデザインに対応させることができる”bootstrap-material-design”というnpmパッケージがあります。

Material Design for Bootstrap

リファレンスをざっと見た感じではかなり充実していそうな内容だったので、早速Laravelに組み込んでみました。
組み込みの際に参考にしたページはこちらです。

Qiitaの様なサービス作成中 ローカル環境構築 連載(1) – Qiita

上記の記事を参考に bootstrap-material-design をインストールし、
resources/assets/js/bootstrap.js
resources/assets/sass/app.scss
resources/assets/js/app.js
も追加したところ…

$ yarn run dev
yarn run v1.15.2
$ npm run development
npm WARN lifecycle The node binary used for scripts is /var/folders/k6/fr1m13p9563g9jb3_n6rtjz80000gn/T/yarn--1556960881810-0.8874045889856248/node but npm is using /usr/local/Cellar/node/12.1.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

...

98% after emitting SizeLimitsPlugin                                           


ERROR  Failed to compile with 2 errors                                                                                                                               18:08:14


error  in ./resources/sass/app.scss


Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):


    @include form-validation-state("valid", $label-color);
   ^
      Missing argument $icon.
    ╷
159 │     @include form-validation-state("valid", $label-color);
    │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap-material-design/scss/mixins/_forms.scss 159:5            form-validation-state()
  node_modules/bootstrap-material-design/scss/mixins/_forms.scss 159:5            bmd-form-color()
  node_modules/bootstrap-material-design/scss/_custom-forms.scss 3:3              @import
  node_modules/bootstrap-material-design/scss/_core.scss 11:9                     @import
  node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss 3:9  @import
  stdin 10:9                                                                      root stylesheet
      
...

まだ何も触っていないのになんか失敗した…

ということでいろいろ調べたらこちらのサイトを発見。

bootstrap-material-designを使った時のコンパイルエラー – Qiita

どうやらbootstrapのバージョンが新しいものだと、このエラーが発生するようです。

記事通りそのまま対策を行い、再度 yarn run dev を実行。

ところが…

...
ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./resources/sass/app.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):


  .is-focused,
^
      Top-level selectors may not contain the parent selector "&".
    ╷
153 │ ┌   .is-focused,
154 │ │   // may or may not be a form-group or bmd-form-group
155 │ │   &.is-focused {
    │ └───────────────^
    ╵
  node_modules/bootstrap-material-design/scss/mixins/_forms.scss 153:3            bmd-form-color()
  node_modules/bootstrap-material-design/scss/_forms.scss 75:1                    @import
  node_modules/bootstrap-material-design/scss/_core.scss 14:9                     @import
  node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss 3:9  @import
  stdin 10:9                                                                      root stylesheet
...

やはりだめでした…

Base-level rules cannot contain the parent-selector-referencing character ‘&’. – GitHub

“node-sass”： “4.7.2”から “node-sass”： “4.9.0”に移動したときにエラーが発生したので、緊急に作業中のプロジェクトが必要な場合はdevDependenciesで以前のバージョンを設定できます。 package.jsonに入って作業を続けます。

今度はsassのバージョンによる問題のようです。

いやこれはややこしすぎる…

ちょっとbootstrap-material-design使うのやめようかなと思ってます(;´∀｀)