vue vue-cli中引入全局less变量的方式

我们经常用less定义一些全局变量，比如主题的颜色，为了避免在每个组件中引用
我首先尝试放在main.js中，发现并不起作用。。。

 

先看vue-cli2.x 版本如何解决

1.安装;

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

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

 
   
   less: generateLoaders('less') 修改成  
less: generateLoaders('less').concat({  
 
    loader: 'sass-resources-loader',  
    options: {  
      resources: path.resolve(__dirname, '../src/assets/css/variable.less')  
    }  
})

variable.less就是你全局less文件  

再看vue-cli3版本如何解决;

1.安装; 

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

第二步配置 vue.config.js 

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