我试图将全局 scss 变量添加到我的 Vue 项目中。我找到了这个例子Globally load sass 。因此,我在 Vue 项目的根文件夹中创建了 vue.config.js
,然后复制并粘贴 vue.config.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 'data'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate
我检查了 package.json
以确保我已经安装了 node-sass
和 sass-loader
并且找到了这些依赖项:
"devDependencies": {
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-router": "^4.1.2",
"@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
}
所以我有点困惑,我不知道我做错了什么。我还知道我可以将这些 .scss
变量导入到我要使用它们的每个 vue 组件中,但我不喜欢这个解决方案。
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/style/index.scss";
`
}
}
}
};
目录结构
最佳答案
将 data
更改为 prependData
...请参阅 docs
关于javascript - 如何修复 Sass 加载器的 ValidationError?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59604036/