js全局變量改變less變量--》頁面動態(tài)主題切換（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環(huán)境變?yōu)殚_發(fā)環(huán)境，在引入所有的.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文件中對應(yīng)的變量。如果修改變量后不生效，可以使用這個方法

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

8.我的index.html文件

參考文章：http://www.rzrgm.cn/niubilityWly/p/8017176.html

posted @ 2020-04-27 10:02 superjsman 閱讀(13219) 評論(0) 收藏舉報

刷新頁面返回頂部

superjsman

————前端東西太多了，學(xué)不動了！

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

公告