webpack-theme-color-replacer插件，实现自定义主题色

webpack-theme-color-replacer插件，实现全局修改主题色
注：webpack-theme-color-replacer插件只支持一级路由，暂不支持子路由中，在子路由中页面是无效的！
1.首先安装插件

npm install ---save webpack-theme-color-replacer

2.然后代码如下：
main.js

//主题色
import './style/element-variables.scss'
import { initThemeColor } from './utils/themeColorClient'
initThemeColor();

theme.vue

themColorClient.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

// 动态切换主题色
export function changeThemeColor(newColor) {
  var options = {
    newColors: [...forElementUI.getElementUISeries(newColor), '#ff0000', '#ffff00']
  }
  return client.changer.changeColor(options, Promise)
    .then(() => {
      curColor = newColor
      sessionStorage.setItem('theme_color', curColor)
    })
}

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

config/app-config.js

module.exports = {
    LOGIN_PATH: './',
    title: '',
    description: '',
    themeColor: '#009688' // 这个色号必须和主题色是一个颜色才行，要不然出来的css模板文件是空的
}

vue.config.js

const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')

module.exports = {
    configureWebpack: {
        plugins: [
            // 生成仅包含颜色的替换样式（主题色等）
            new ThemeColorReplacer({
                fileName: 'style/theme-colors.[contenthash:8].css',
                matchColors: [
                ...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR), // element-ui主色系列          
                ],
                externalCssFiles: ['./node_modules/element-ui/lib/theme-chalk/index.css'],
                changeSelector: forElementUI.changeSelector,
            })
        ]
    }, 
};