VUE-CLI配置全局SCSS变量
一.引入node-sass和sass-loader依赖
npm install --save-dev sass-loader node-sass二. 在项目根目录中创建一个scss变量文件，比如constant.scss：
三.在vue.config.js文件中引入这个变量文件：
// vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/utils/css/constant.scss";`
}
}
}
};四.版本错误的配置
sass-loader版本问题引发的错误：options has an unknown property 'prependData'. These properties are valid
当前版本如下:
"sass": "^1.32.7", "sass-loader": "^12.0.0",
原来的写法：
css: {
loaderOptions: {
sass: {
prependData: '@import "@/utils/css/constant.scss";'
}
}
}修改后（生效）：
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
css: {
loaderOptions: {
sass: {
additionalData: '@import "@/utils/css/constant.scss";'
}
},
}
})多个文件全局配置
css: {
loaderOptions: {
scss: {
additionalData: `
@import "@/style/utils/_variables.scss";
@import "@/style/utils/mixin.scss";
`
}
}
}