vue-cli3 设置全局的css变量

事件背景，今天新开发一个项目的时候整套项目有一个 主题颜色 ;

第一步 定义全局css变量

首先我们写一个scss文件（也可以css，less..）；
定义好需要全局使用的css，例如：我这里写了一个color

定义一个color.png

第二步 配置到预加载

在vue.config.js中添加你要预加载的全局css变量, 注意import你的文件路径

module.exports = {
    // css 相关选项
    css: {
        /*为预处理器 loader 传递自定义选项*/
        loaderOptions: {
            sass: {
                data: `@import "@/style/color.scss";`
            }
        }
    },
}

vue.config.js.png

第三步 使用

在需要使用的地方 将值设置为刚才定义的变量名字即可

使用.png