vue-cli3配置全局变量
引入插件sass-resources-loader
npm
install sass-resources-loader
例如把颜色的变量都放到color.scss文件中
//把颜色的变量都放到color.scss文件中 @charset "UTF-8"; @import "base"; $defaultColor:#296BB5;// $activeColor:#1F58B5; $colorBorder:#ddd;
在vue.config.js文件中添加css 预处理代码。
color.scss中的变量在其它组件中都可以直接使用了。
module.exports = { css: { extract: true,// 是否使用css分离插件 ExtractTextPlugin sourceMap: false,// 开启 CSS source maps loaderOptions: { sass: { prependData: ` $env: ${process.env.NODE_ENV}; @import "src/assets/css/color.scss";` } }, modules: false// 启用 CSS modules for all css / pre-processor files. }, }