在 Vue 项目中的vue.config.js文件里引入 Sass 全局样式变量时，发生报错，具体文件配置如下
package.json 中
"dependencies": {
"core-js": "^3.6.4",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.3.0",
"@vue/cli-plugin-unit-mocha": "^4.3.0",
"@vue/cli-service": "^4.3.0",
"@vue/test-utils": "1.0.0-beta.31",
"chai": "^4.1.2",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
vue.config.js 中
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/styles/global.scss";`
}
}
}
}
然后 npm run serve 后，遇到报错
error in ./src/components/Button/SButton.vue?vue&type=style&index=0&id=1d68e5b8&lang=scss&scoped=true&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized 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? }
查看了 vue cli 官方文档https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
发现，sass-loader v7 以上的版本，将选项名从 data 更改为 prependData
修改 vue.config.js 文件
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/assets/styles/global.scss";`
}
}
}
}
@import "@/assets/styles/global.scss";这个后面一定要加分号，不然会收到这样的报错
SassError: media query expression must begin with '('
