将 Vuetify 从 1.5 升级到 2 时,Sass-loader 错误“options 具有未知属性‘indentedSyntax’”
2019-10-04
19940
我正在将我的 Vue CLI 3 项目中的 Vuetify 从 1.5 版本升级到 2 版本。我已遵循 这些 说明进行了完整安装。自升级以来,运行“npm run serve”会出现大量错误,如下所示:
error in ./node_modules/vuetify/src/components/VGrid/_grid.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 (C:\Users\kristoffer.dahl\Documents\Prosjekter\fridgein\fridgein_fe\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
at Object.loader (C:\Users\kristoffer.dahl\Documents\Prosjekter\fridgein\fridgein_fe\node_modules\sass-loader\dist\index.js:36:28)
除了提到的 Vuetify 组件外,所有错误看起来都一样。
这是我的
package.json
:
{
"name": "fridgein_fe",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.22",
"@fortawesome/free-brands-svg-icons": "^5.10.2",
"@fortawesome/free-regular-svg-icons": "^5.10.2",
"@fortawesome/free-solid-svg-icons": "^5.10.2",
"@fortawesome/vue-fontawesome": "^0.1.7",
"@vue/cli": "^3.11.0",
"@vue/cli-shared-utils": "^3.11.0",
"auth0-js": "^9.11.3",
"axios": "^0.18.1",
"dotenv": "^8.1.0",
"es6-promise": "^4.2.8",
"jquery": "^3.4.1",
"js-cookie": "^2.2.1",
"popper.js": "^1.14.7",
"register-service-worker": "^1.6.2",
"sockjs-client": "^1.3.0",
"vue": "^2.6.10",
"vue-float-action-button": "^0.4.4",
"vue-google-charts": "^0.3.2",
"vue-plugin-load-script": "^1.2.0",
"vue-router": "^3.0.2",
"vuetify": "^2.1.0",
"vuex": "^3.1.1",
"vuex-persistedstate": "^2.5.4",
"webstomp-client": "^1.2.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.4.0",
"@vue/cli-plugin-eslint": "^3.4.0",
"@vue/cli-plugin-pwa": "^3.11.0",
"@vue/cli-service": "^3.5.1",
"babel-eslint": "^10.0.1",
"babel-plugin-module-resolver": "^3.2.0",
"css-loader": "^2.1.1",
"deepmerge": "^4.0.0",
"eslint": "^5.0.0",
"eslint-plugin-vue": "^5.2.3",
"eslint-plugin-vuetify": "^1.0.0-beta.3",
"fibers": "^4.0.1",
"sass": "^1.23.0",
"sass-loader": "^8.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0",
"webpack": "^4.41.0"
},
这是我的
vue.config.js
:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "~@/sass/main.scss"`
},
},
},
}
我已经检查并尝试了开发人员 Github 页面上相关问题中提出的每个解决方案,但都没有任何效果。
还有其他人遇到过这种情况吗?
3个回答
我遇到了同样的问题,并通过在
package.json
中设置
"sass-loader": "7.3.1",
来降级
sass-loader
解决了该问题。
这是在 Vuetify Discord 上提出的建议
user1380
2019-10-07
实际上,您使用的是 sass-loader 8+,并且它的选项略有不同。
尝试使用
prependData
而不是
data
。
查看此
github 问题
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "~@/sass/main.scss"`
}
}
}
}
Pisandelli
2020-03-26
针对使用版本 10+ 的用户进行更新。
prependData
不再有效。但是,您可以使用
additionalData
作为临时替代品。
Alex Foxleigh
2020-10-06