gpt4 book ai didi

javascript - Vuetify - 构建时抛出 'Module parse failed:' 错误

转载 作者:行者123 更新时间:2023-12-02 22:29:43 25 4
gpt4 key购买 nike

我一直在尝试解决这个问题,但找不到任何解决方案。

我使用vue init webpack-simple my-project创建了项目

我遵循 https://vuetifyjs.com/en/getting-started/quick-start#webpack-install 中提到的相同步骤

运行npm run dev后,我的所有 vuetify 组件都出现这些错误

ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/sass-loader/dist/cjs.js?indentedSyntax!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (D:\project\webpack-vue\my-project\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
at Object.loader (D:\project\webpack-vue\my-project\node_modules\sass-loader\dist\index.js:36:28)
@ ./node_modules/vuetify/src/styles/main.sass 4:14-222 13:3-17:5 14:22-230
@ ./node_modules/vuetify/lib/framework.js
@ ./node_modules/vuetify/lib/index.js
@ ./src/vuetify.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

ERROR in ./node_modules/vuetify/src/directives/ripple/VRipple.sass (./node_modules/css-loader!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/sass-loader/dist/cjs.js?indentedSyntax!./node_modules/vuetify/src/directives/ripple/VRipple.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (D:\project\webpack-vue\my-project\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
at Object.loader (D:\project\webpack-vue\my-project\node_modules\sass-loader\dist\index.js:36:28)
@ ./node_modules/vuetify/src/directives/ripple/VRipple.sass 4:14-240 13:3-17:5 14:22-248
@ ./node_modules/vuetify/lib/directives/ripple/index.js
@ ./node_modules/vuetify/lib/directives/index.js
@ ./node_modules/vuetify/lib/index.js
@ ./src/vuetify.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

package.json:

  "dependencies": {
"vue": "^2.5.11",
"vuetify": "^2.1.10"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"file-loader": "^1.1.4",
"sass": "^1.23.7",
"sass-loader": "^8.0.0",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^4.13.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}

我没有修改 webpack 中的任何内容,只是添加了 vuetify 建议的几行(可在上面的链接中找到)。

最佳答案

您发布的链接提到您需要sass-loader@^7.0.0

// Requires sass-loader@^7.0.0

当您使用"sass-loader": "^6.0.6"时。

您遇到的问题出现在github issues上几次,很可能与 sass 版本有关。

  1. 从 package.json 中删除 sasssass-loader
  2. 运行npm iyarn
  3. 运行npm i sass sass-loader@^7.0.0yarn add sass sass-loader@^7.0.0
  4. 运行npm run dev

关于javascript - Vuetify - 构建时抛出 'Module parse failed:' 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58948536/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com