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")
             ]
         }
     }
     ...
    }