less在vue中的全局变量设置

1.安装;

npm install sass-resources-loader --save-dev

2. 找到build文件夹下面的utils.js

less: generateLoaders('less') 

修改成: 
less: generateLoaders('less').concat({ 
  
    loader: 'sass-resources-loader', 
    options: { 
      // 全局变量文件路径, variable.less就是你全局less文件 
      resources: path.resolve(__dirname, '../src/assets/css/variable.less') 
    } 
})

vue-cli3 及以上版本

1.安装;

npm i less@2.7.3 less-loader --save

2. 如果在使用 vue create 创建项目时，没有选择 css pre-processors 中的less

   使用vue安装style-resources-loader

 vue add style-resources-loader  

安装完成后选择less预处理器

3. 配置 vue.config.js

module.exports = {
     ...
     pluginOptions: {
        "style-resources-loader": {
            preProcessor: "less",
            patterns: [
              // 这个是加上自己的路径，
              // 注意：试过不能使用别名路径，不能用@，只能用相对路径
              path.resolve(__dirname, "./src/assets/variable.less")
             ]
         }
     }
     ...
    }