Quantcast
Viewing all articles
Browse latest Browse all 8883

sass-loader11.xはwebpack4以下では動かなくなった

GitHubに置いてあるVueのアプリケーション。先日、いつものようにdependabotが送り付けてくるプルリクエストを雑にマージしていると、突然CodePipelineからビルド失敗の通知が飛んできました。

ログ曰く

> flowerstand-frontend@1.0.2 build:prod /codebuild/output/src984942440/src/frontend/app
> vue-cli-service build --mode production


-  Building for production...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 ERROR  Failed to compile with 1 error5:29:44 PM

 error  in ./node_modules/vuetify/src/components/VAlert/VAlert.sass

TypeError: this.getOptions is not a function


 @ ./node_modules/vuetify/lib/components/VAlert/VAlert.js 5:0-52
 @ ./node_modules/vuetify/lib/components/VAlert/index.js
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi ./src/main.ts

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! flowerstand-frontend@1.0.2 build:prod: `vue-cli-service build --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the flowerstand-frontend@1.0.2 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-03-26T17_29_44_078Z-debug.log

このときにバージョンを上げたのはsass-loaderで、ログを見るにいかにもそれっぽい感じのこけ方をしています。メジャーバージョンが上がっていたのでリリースノートを確認すると

⚠ BREAKING CHANGES
minimum supported webpack version is 5

はい。

Vue2.xはまだwebpack4なので、sass-loaderのバージョンを落とします。

package.json
"sass-loader":"^10.1.1",

$ npm install

これで解決。

しかしsass周りってどうもトラブルが多い気がする・・・。


Viewing all articles
Browse latest Browse all 8883

Trending Articles