更新的scss版本在vue cli3的项目里面的配置需要修改参数设置,具体在vue.config.js文件
很多博客里面的写法都是这样的
css: {
loaderOptions: {
sass: {
// @/ is an alias to src/
data: `@import "@/styles/variables.scss";`
}
}
}
但是这样写会引起sass-loader报错:
Module build failed (from ./node_modules/_sass-loader@8.0.0@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 ‘data’. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (C:\Users\hello\Desktop\mobile-demo\node_modules_schema-utils@2.5.0@schema-utils\dist\validate.js:50:11)
at Object.loader (C:\Users\hello\Desktop\demo\node_modules_sass-loader@8.0.0@sass-loader\dist\index.js:36:28)
这里更正下正确的写法
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/variables.scss";`
}
}
}