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