Elixirからmixに乗り換える

エラー内容を見て修正を施すも別のエラーが出現し、出口へ向かっているのか、エラーの深淵に足を踏み入れているのかわからなくなったので記録しておく。

まず最低限のパッケージをnpm installして取り掛かること。

パッケージは可能な限り最新版をインストールする。

sass(Dart sass)とnode-sassがあるが、基本的にどちらでも同じように動作する。
ただ、sassだと!globalフラグを使っているとwarningとして警告される。!globalを消せば警告もなくなる。

webpack.mix.jsに記載するコードは最低限に留める。
また移行作業をするときにはすべてコメントアウトし、上から順に正しく実行できているか確認しながら少しずつ有効なコードを残していく。

LaravelMixに移行する際にパスの指定をgulpからそのまま引き継ぐことはできない。
publicがデフォルトパスになるなど変化があるので、laravel-mixの公式サイトでhow to upgradeなどを参考にすること。

ワイルドカードを使って複数のファイルを一括で指定することはデフォルトではできない。
追加でglobなどのpackageをインストールして使う必要がある。

scssからurl()メソッドで画像などへのパスを書く場合にlaravel-mixでは自動変換が行われる。
しかし相対パスの場合はエラーが出る原因になるので、processCssUrls: falseで自動書き換えをOFFにする。

scssからcssへコンパイルするために必要なパッケージは複数あり実行順序をwebpack.configで指定する必要はなかった。
laravel-mixは自動で各loaderの実行順序を揃えてくれる。
以下が下から順番にロードされる。
./node_modules/css-loader
./node_modules/postcss-loader
./node_modules/resolve-url-loader
./node_modules/sass-loader/dist/cjs.js
./resources/assets/sass/example.scss

以上、備忘録。