vue-cli3.0搭建项目后--使用全局颜色(样式)变量(style-resources-loader)

第一步：安装style-resources-loader👇

vue add style-resources-loader

第二步：在vue.config.js中加入这块代码👇

// 如果没有下载path插件需要先安装一下
const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less', // 如果你使用的是scss，那这里要写scss
      patterns: [
        // 此路径要根据你的实际情况
        path.resolve(__dirname, './src/assets/variableCss.less')
      ]
    }
  }
}

第三步：根据路径创建variableCss.less文件，书写格式👇

@bas-bgc: rgba(63, 156, 149);
@bas-width: 2rem;

第四步：在样式里使用👇

<style lang="less">
.zsFooter {
  width: @bas-width;
  height: 2rem;
  background-color: @bas-bgc;
}
</style>

备注：如果你是使用scss，那vue.config.js的preProcessor：scss，然后新建的文件为variableCss.scss，然后文件内格式不是@，而是$，其他都是一样的。