在 Vue 項(xiàng)目中的vue.config.js文件里引入 Sass 全局樣式變量時(shí)卦碾，發(fā)生報(bào)錯(cuò)，具體文件配置如下
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 后褐耳，遇到報(bào)錯(cuò)
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
發(fā)現(xiàn)，sass-loader v7 以上的版本，將選項(xiàng)名從 data 更改為 prependData
修改 vue.config.js 文件
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/assets/styles/global.scss";`
}
}
}
}
@import "@/assets/styles/global.scss";這個(gè)后面一定要加分號(hào)痴柔，不然會(huì)收到這樣的報(bào)錯(cuò)
SassError: media query expression must begin with '('
