API模式不匹配，導致ValidationError: 無效的選項物件。 CSS Loader已使用不符合API模式的選項物件進行初始化

Question

摘要

#

我透過yarn create nuxt-app以SPA模式建立了Nuxt.js專案。

但是，安裝Storybook後，yarn dev傳回錯誤並且無法啟動示範頁面。

ERROR  Failed to compile with 1 errors                                                       friendly-errors 17:38:56

ERROR  in ./layouts/error.vue?vue&type=style&index=0&id=d5ea9138&scoped=true&lang=css&       friendly-errors 17:38:56

Module build failed (from ./node_modules/css-loader/dist/cjs.js):                             friendly-errors 17:38:56
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.modules has an unknown property 'compileType'. These properties are valid:
   object { auto?, mode?, exportGlobals?, localIdentName?, localIdentRegExp?, context?, hashPrefix?, getLocalIdent? }
    at validate (/home/jpskgc/ghq/github.com/jpskgc/vue-nuxt-vuetify-sass-storybook/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:98:11)
    at Object.loader (/home/jpskgc/ghq/github.com/jpskgc/vue-nuxt-vuetify-sass-storybook/node_modules/css-loader/dist/index.js:36:28)
                                                                                              friendly-errors 17:38:56
 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/@nuxt/webpack/node_modules/vue-loader/lib??vue-loader-options!./layouts/error.vue?vue&type=style&index=0&id=d5ea9138&scoped=true&lang=css& 4:14-385 15:3-20:5 16:22-393
 @ ./layouts/error.vue?vue&type=style&index=0&id=d5ea9138&scoped=true&lang=css&
 @ ./layouts/error.vue
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

我想知道如何解決此錯誤並成功運行 yarn dev 命令。

一些程式碼

這是儲存庫。請檢查。

https://github.com/jpskgc/vue-nuxt-vuetify-sass-storybook

環境

Ubuntu20.04

Answer 1

我透過新增以下開發依賴項解決了這個問題。

yarn add --dev css-loader@^5.0.0 postcss@^8.1.10 postcss-import@^13.0.0 postcss-loader@^4.1.0 postcss-url@^10.1.1