vue cli で vue 2.6 -> 2.7 に update して出たエラーいろいろ。sass-loaderでハマりました

３年放置してる vue2.6 の project の packages をアップデートしてみた。element-ui の bug があり、firefoxで崩れると言われたもので・・ firefoxは1%切りそうなユーザなので無視したいんだけど、かわいそうなのでやることにする

vue3 はきついのでとりあ vue2.7にする. だいたい動いたけど sass-loader でつまづいた

Vue cli で Vue 2.6 → 2.7 にする

disableHostCheck が使えない

vue.config.js

module.exports = {
   devServer: {
     host: '0.0.0.0',
-    disableHostCheck: true,    <---- error
+    allowedHosts: "all",     <----- 入れ替え

Moment の locale 設定でエラー

vue.config.js

module.exports = {
   },
   configureWebpack: {
     plugins: [
+      /**
+       * Ignore Moment locales
+       * https://webpack.js.org/plugins/ignore-plugin/
+       */
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
       // new BundleAnalyzerPlugin(),
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-    ]

※ moment自体使わないのが吉です

sass-loaderが動かない

.vue ファイルの <style lang="scss"> で scss 変数を使うのに必要。

error

Syntax Error: 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 'presentedData'. These properties are valid:
   object { implementation?, api?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }

sass-loader >= 9 + vue cli の書き方

1. まず vue.config.js を修正

vue.config.js

module.exports = {
  ...,
  configureWebpack: {
    ...
  },

   // .vue の <style lang="scss"> で CSS 変数を使えるようにする
   css: {
     loaderOptions: {
-      sass: {
-        prependData: `@import '@/element-variables.scss';`
+      scss: {
+        additionalData: `@import '@/element-variables.scss';`
       }
     }
   }

この２行で死ぬほどハマりました。普通にvue公式に書いてた。

ref

2. vue.configだけでは直らない

SassError: This file is already being loaded. と言われた場合、他でimportしてるのをやめる必要がある

main.js

-import './element-variables.scss'
+// import './element-variables.scss'
 

これで移行できたっぽいです。