vue-cli3中设置less全局变量

Step1.下载更新至最新的vue-cli3.X

npm install -g @vue/cli
           

Step2. 安装 vue-cli-plugin-style-resources-loader

根据文档执行：(不要直接npm i 安装，用vue内置的add：)

vue add style-resources-loader
           

安装过程中，会询问安装哪个预处理器：(我用的是less)

Step3. 手动添加需要引入的变量文件

步骤2完成之后，会在vue.config.js自动添加less的配置，当然变量文件是需要手动添加的

@blueColor:blue;
           

const path = require("path");  
module.exports = {
    css: {
    },
    pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'less',
          patterns: [
           path.resolve(__dirname, './src/less/variables.less')  // 变量文件位置
         ]
       }
    },
}
           

Step4. 使用

<style >
  @import "~@/style/varibles.less";
  .videoCourse .tabs-tab-active{
      color: @color;
      border-bottom: 1px solid @color;
  }
</style>