利用webpack-theme-color-replacer插件兴猩，為elementui實現(xiàn)了在運(yùn)行時動態(tài)切換主題色的功能鞭衩，無需在頁面進(jìn)行l(wèi)ess的編譯敲茄，提升了切換速度充包。

好了副签，廢話不多說，直接上代碼

image.png

/*/config/app-config.js*/
module.exports = {
    LOGIN_PATH: './',
    title: 'vue + webpack4 + element-ui腳手架項目',
    description: 'vue + webpack4 + element-ui腳手架項目',
    themeColor: '#409EFF' // 這個色號必須和主題色是一個顏色才行，要不然出來的css模板文件是空的
  }

/*/vue.config.js*/
const webpack = require('webpack')
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')

const appConfig = require('./config/app-config.js')
module.exports = {
  configureWebpack: {
    plugins: [
      // 生成僅包含顏色的替換樣式（主題色等）
      new ThemeColorReplacer({
        fileName: 'style/theme-colors.[contenthash:8].css',
        matchColors: [
          ...forElementUI.getElementUISeries(appConfig.themeColor)
        ],
        changeSelector: forElementUI.changeSelector,
        isJsUgly: process.env.NODE_ENV === 'production' ? true : undefined
      })
    ]
  }
}

如果是cli2的話家浇，這個文件中的plugins定義在build/webpack.base.conf.js中本砰。

/*/src/utils/themeColorClient.js*/
import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
// 注意自己項目里的引入路徑
import appConfig from '../../config/app-config'

export let curColor = appConfig.themeColor

// 動態(tài)切換主題色
export function changeThemeColor(newColor) {
  var options = {
    newColors: [...forElementUI.getElementUISeries(newColor)]
  }
  return client.changer.changeColor(options, Promise)
    .then(() => {
      curColor = newColor
      localStorage.setItem('theme_color', curColor)
    })
}

export function initThemeColor() {
  const savedColor = localStorage.getItem('theme_color')
  if (savedColor) {
    curColor = savedColor
    changeThemeColor(savedColor)
  }
}

/*/src/main.js*/
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

import ElementUI from 'element-ui';
Vue.use(ElementUI)

// 主題換膚
import { initThemeColor } from './utils/themeColorClient'

initThemeColor();

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

/*/src/views/Home.vue*/
<template>
  <div class="home">
    <div class="head"></div>
    <el-button type="primary">主要按鈕</el-button>
    <el-color-picker
      size="medium"
      @change="changeColor">
    </el-color-picker>
    <div>
      <span class="font-test">
        看我到底變不變色
      </span>
      <span class="font-test1">
        看我到底變不變色
      </span>
    </div>
  </div>
</template>

<script>
import { changeThemeColor } from '@/utils/themeColorClient'
export default {
  name: "Home",
  data() {
    return {
    }
  },
  methods: {
    changeColor(newColor) {
      changeThemeColor(newColor).then(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.head{
  height:100px;
  width: 100%; 
  background-color: #409EFF;
}
.font-test{
  font-size: 20px;
  line-height: 40px;
  color: #409EFF;
}
.font-test1{
  font-size: 20px;
  line-height: 40px;
  color: #000000;
}
</style>

最后，一定不能遺漏babel.config.js的修改蓝谨，當(dāng)時我也是沒有修改babel這里灌具，鼓搗了半天青团。（babel還在學(xué)習(xí)中譬巫，也不知道原因是啥）

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
      [
          'babel-plugin-component',
          {
              libraryName: 'element-ui',
              styleLibraryName: '~node_modules/element-theme-chalk/src',
              ext: '.scss'
          }
      ]
  ],
};

來看一下運(yùn)行效果吧~

image.png

當(dāng)點(diǎn)擊按鈕，換膚后：

image.png