如何在vue項目中修改less變量，多主題項目解決方案

【項目結構】webpack+vue+less

【解決方案】

　　首先將vue中每個.vue文件里面的style提取出來

　　安裝依賴

 npm install extract-text-webpack-plugin --save-dev

　　安裝完成后修改webpack.base.conf.js中的配置

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
                less: ExtractTextPlugin.extract({
                  fallback: 'vue-style-loader',
                  use: 'css-loader!less-loader'
                }),
                css: ExtractTextPlugin.extract({
                  fallback: 'vue-style-loader',
                  use: 'css-loader'
                })
              }
            }
          },    
]},

plugins: [

　　new ExtractTextPlugin({

　　filename: 'css/styles.less' //路徑以及命名

　　})

],

　　在index.html中引入styles.less

  <link rel="stylesheet/less" href="./css/styles.less">

　　這個時候我們就能在頁面中看到styles.less這個文件了，webpack的配置可能略有不同，如果我這個方法不可用可以另外搜索，vue提取style到一個文件中的方法在文檔中也有。拿到styles.less這個文件以后，我們就能通過less.js而不是less-loader來編譯這個文件了。

把less環境變為開發環境，在引入所有的.less和.css文件后面引入less.js。

  <script>
     less = {
       env: 'development',
     }
  </script>

  <script src="static/js/less.js"></script>

　　這個時候我們就可以開始刪除所有style中的lang=less了，把所有的lang=less刪除掉，可以直接全局替換。這個過程中可能會報很多小錯誤，但是我相信你們都能解決掉。如果有解決不了可以提問，我可以看看是不是我遇到過的。最后我們得到的是所有寫在style中的樣式都成功的到了styles.less這個文件中，在vue項目中less可以讀取到全局變量。並能通過js修改相應的變量。

　　可以在js文件中定義全局變量，如：

　　

var appName_ = "a";
  
switch (appName_) {
  case 'a':
    var  masterColor = "#28a9ff",
           masterBack = "#fff",
           masterShadow = "#000";
    break;      
   case 'b':
    var  masterColor = "#fff",
           masterBack = "#000",
           masterShadow = "#fff";
    break;
    default:
    var  masterColor = "#fff",
           masterBack = "#000",
           masterShadow = "#fff";
    break;    
};

 　　在.less文件中這樣子取，e()是less的一個函數，它接受一個字符串作為參數，並原樣返回內容，不含引號。

　　

　　這樣子寫完之后就可以在js文件中配置和修改less中的變量了。在需要修改less變量的地方直接修改js文件中對應的變量。如果修改變量后不生效，可以使用這個方法：

　less.modifyVars({
     'rectangle-color': 'red'
  });