vue cli3 配置全局sass变量

1.新建variables.scss文件，注册变量

2.配置到预加载

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

module.exports = {
    // lintOnSave: true,
    publicPath: "./",
    css: {
        loaderOptions: {
            sass: {
             	// 注意配置的键名
                // sass-loader 版本不同，loaderOptions 中的 additionalData 的键名也不同
                // data: '@import "@/styles/variables.scss"'   // v8-
                prependData: '@import "@/styles/variables.scss"'  //v8
                // additionalData: '@import "@/styles/variables.scss"'   //v10+
            }
        }
    },
    devServer: {
        proxy: {
            "/api/": {
                target: "http://172.xx.x.xx:8888",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    },
}

由于 sass-loader 版本不同，loaderOptions 中的 additionalData 的键名也不同

sass-loader-loader v8-，   这个选项名是 "data"，
sass-loader-loader v8中，  这个选项名是 "prependData"，
sass-loader-loader v10+，  这个选项名是 "additionalData"，