js全局變量改變less變量--》頁面動態主題切換（vue-cli項目）

1.安裝依賴 
npm install extract-text-webpack-plugin --save-dev
2.修改webpack.base.conf.js中的配置

　const ExtractTextPlugin = require('extract-text-webpack-plugin')

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' //路徑以及命名
　　})
],

　3.在index.html中引入styles.less（打包生成的）

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

4.把less環境變為開發環境，在引入所有的.less和.css文件后面引入less.js（自己下載less.js文件:https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js）

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

　　　　　javascriptEnabled: true，

     }
  </script>

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

5.開始刪除所有style中的lang=less了，把所有的lang=less刪除掉，可以直接全局替換。（語法校驗會報紅，不用管）

6.在js中定義全局變量:

 

 在需要用變量的地方這樣用：

 

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

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

8.我的index.html文件

 

 

參考文章：https://www.cnblogs.com/niubilityWly/p/8017176.html