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";`}}
}