nuxtでvuetify使ってる環境に node-sass と sass-loader 突っ込むと nuxt build できなくなる話

公式エントリっぽい CSS プリプロセッサを使うには？ に従ったら 3時間 溶けることになったので、注意喚起も兼ねて投稿。

先に結論

node-sass と sass-loader の代わりに @nuxtjs/style-resources を使う。

vuetify-module の issue に同じ境遇の人が居ました。（記事書いてから気づいた。）
https://github.com/nuxt-community/vuetify-module/issues/82

I think styleResources module is conflicting around node-sass vs dart-sass, I don't have any workaround except the commit I proposed on the fixed branch, which means not using @nuxtjs/styleResources (and yes it means having to copy imports whenever you have to use variables in components)

手順的な何か

依存関係とかで苦しみたくなかったので、潔く再インストール。

package.jsonを編集して、

package.json(diff)

   "dependencies": {
     "@nuxt/typescript-runtime": "^0.4.10",
     "@nuxtjs/axios": "^5.11.0",
     "@types/node": "^14.0.23",
-    "node-sass": "^4.14.1",
+    "@nuxtjs/style-resources": "^1.0.0",
     "nuxt": "^2.13.0",
     "pug": "^3.0.0",
     "pug-loader": "^2.4.0",
-    "sass-loader": "^9.0.2"
     "pug-plain-loader": "^1.0.0"
   },

node_modules と package-lock.json を削除して npm install

$ rm -rf node_modules/ package-lock.json
$ npm install

解決経緯 （ただの愚痴）

create-nuxt-app を利用してNuxt+TypeScript+Vuetify の環境を作成した。
Pug 記法と scss 記法を使いたかったので、 公式のエントリCSS プリプロセッサを使うには？ を参考に以下を実行

$ npm install --save-dev pug pug-plain-loader
$ npm install --save-dev node-sass sass-loader

Pug も scss も使えるようになってめでたしめでたし。

と思いきや、 npm run build (nuxt build) すると

 FATAL  Nuxt build error                                                                                    20:04:38

  at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:5472:21)
  at processTicksAndRejections (internal/process/task_queues.js:97:5)
  at async WebpackBundler.build (node_modules/@nuxt/webpack/dist/webpack.js:5421:5)
  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5629:5)
  at async Object.run (node_modules/@nuxt/cli/dist/cli-build.js:107:7)
  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:2798:7)


   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

… は？ npm run dev (nuxt) コマンドは正常に動作していたのに？？？
エラーメッセージ見てみると…

...

ERROR in ./node_modules/vuetify/src/components/VMessages/VMessages.sass

...

Vuetify の sass 関係が原因っぽいことは分かった。 ネットの海をさまよいつつ 環境構築を何回も 2時間ほどやっているうちに、 @nuxtjs/style-resources の存在を知る。
入れ替えて試してみる -> 解決

めでたしめでたし…

得た教訓

公式の FAQ も当てにならないことがある…