【Laravel】npm run dev実行時に「Sass Loader has been initialized ...」エラーが発生した時の解決方法！

あきぞらです。

Laravelの開発環境を構築しているとき、一通り構築が終わったタイミングで

npm run devを実行したら「Sass Loader has been initialized ...」といったエラーが発生してしまいました。

今回はその解決方法について紹介していきます。

npm run dev実行時にエラー

npm run devコマンドを実行したときに、以下のようなエラーが発生しました。

$ npm run dev
 ERROR  Failed to compile with 2 errors                                                                                                                                                  
 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/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (\XXX\XXX\XXX\node_modules\schema-utils\dist\validate.js:98:11)
    at Object.loader (\XXX\XXX\XXX\node_modules\sass-loader\dist\index.js:36:28)
    at \XXX\XXX\XXX\node_modules\webpack\lib\NormalModule.js:316:20
    at \XXX\XXX\XXX\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at \XXX\XXX\XXX\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at runSyncOrAsync (\XXX\XXX\XXX\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (\XXX\XXX\XXX\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at \XXX\XXX\XXX\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at \XXX\XXX\XXX\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:85:15
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

 error  in ./resources/sass/app.scss

どうやら、sassを読み込むあたりでエラーになっているようです。

sass-loaderのバージョンを確認してみる

調べていくと、

sass-loaderのバージョンが8であるとエラーになってしまうことがあるようです。

GitHub

Compatibility with sass-loader 8.0.0 · Issue #2206 · JeffreyWay/laravel-mix

https://github.com/JeffreyWay/laravel-mix/issues/2206

Laravel Mix Version: 4.1.2 Description: A heads up that Laravel mix doesn't seem to be compatible with sass-loader 8.0.0 (just released) which has some breaking changes. Steps To Reproduce: See...

package.jsonのsass-loaderのバージョンを確認してみると、確かに8.0.0でした。

"devDependencies": {
    "axios": "^0.18",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
}

sass-loaderのバージョンを7.1にする

バージョンを下げてインストールしなおしてみます。

まずは8をアンインストールします。

$ npm uninstall --save-dev sass-loader

7.1をインストールします。

$ npm install --save-dev sass-loader@7.1.0

これを実行したあと、再度npm run devを実行すると、うまくいきました！