vue2实现动态换element-ui主题色

第一种：重新引入新主题色的链接（网络不好的情况下，可能会出错或换色比较慢）

转载自掘金，原文链接：Element-ui 通过实时修改主题色实现一键换肤

第二种：webpack-theme-color-replacer插件实现（推荐）

注意：此时main.js里引入element样式要改成

import 'element-ui/packages/theme-chalk/src/index.scss'

使用官方推荐的

import 'element-ui/lib/theme-chalk/index.css'

会导致换主题色无效。 

1、安装依赖包。

        注意同时需要 sass、sass-loader。

        我这里的版本分别是sass@1.35.1、sass-loader@9.0.3、webpack-theme-color-replacer@1.4.7

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

2、vue.config.js里添加对应的plugin。

configureWebpack: {
    plugins: [
      // 生成仅包含颜色的替换样式（主题色等）
      new ThemeColorReplacer({
        fileName: 'style/theme-colors.[contenthash:8].css',
        matchColors: [...forElementUI.getElementUISeries('#1890ff')],
        externalCssFiles: [
          './node_modules/element-ui/lib/theme-chalk/index.css'
        ],
        changeSelector: forElementUI.changeSelector,
        injectCss: true // 解决router为history模式下改变样式后刷新页面不生效的问题
      })
    ]
}

3、src/utils文件夹下添加换主题色方法ElementTheme.js。

import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'

// 动态切换主题色
export function changeElementColor(newColor) {
  var options = {
    newColors: [...forElementUI.getElementUISeries(newColor)],
    appendToEl: 'body'
  }
  return client.changer.changeColor(options, Promise).then(() => {
  })
}

4、调用方法，大功告成。

import { changeElementColor } from '@/utils/ElementTheme'

changeElementColor('#2ca1f4')