如何在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'
  });