webpack-theme-color-replacer自定义element-ui主题

前言

因为项目采用UI组件element-ui，需要部署后（打包后）设置主题，在网上找了一遍，如下几种方法。

1/使用全局样式覆盖（工作量大）

2/自定义element-ui配色，element-ui提供了一个配置页面 和 配色工具，可以本地生成固定的几套主题色，以便来实现主题切换（编译后无法修改）

3/ 通过后端返回css文件，前端配合使用localStorage，储存主题对应的参数，后端返回对应的css主题文件（和方法2一样，需要先生成多个主题css文件）

4/通过改变element-ui的样式变量（无法将变量通过js传入）
        

$--color-primary: #409EFF; // 主题色
$--color-success: #52C41A; // 成功颜色
$--color-warning: #FAAD14; // 警告颜色
$--color-danger: #F5222D; // 错误危险颜色
$--color-info: #999999; // 信息颜色

---

 上面的方案都无法满足编译后修改element-ui主题，最终找到webpack-theme-color-replacer解决。

步骤一

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

步骤二

        vue.config.js引入插件
        

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

chainWebpack: config => {
    // 自定义换肤
    config.plugin('webpack-theme-color-replacer')
      .use(ThemeColorReplacer)
      .tap(options => {
        const matchColors = []
        const data = ['#409EFF', '#52C41A', '#FAAD14', '#F5222D', '#999999']
        data.forEach(item => {
          matchColors.push(...forElementUI.getElementUISeries(item))
        })
        options[0] = {
          fileName: 'css/theme-colors-[contenthash:8].css',
          matchColors: matchColors,
          changeSelector: forElementUI.changeSelector,
          isJsUgly: process.env.NODE_ENV !== 'development'
        }
        return options
      })
  }

我这边是修改了5种element-ui按钮类型的样式

步骤三 
        

新建themColorClient.js文件来切换主题，代码如下

import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
 
export const curColor = window.g.ThemeColor
 
// 动态切换主题色
export function changeThemeColor () {
  const data = []
  Object.values(curColor).forEach(item => {
    data.push(...forElementUI.getElementUISeries(rgbToHex(item)))
  })
  const options = {
    newColors: data,
    changeUrl (cssUrl) {
      console.log('cssUrl', cssUrl)
      return `${window.g.VUE_DYD_CONFIG_URL}/${cssUrl}`
    }
  }
  return client.changer.changeColor(options, Promise)
}
export function rgbToHex (rgb) {
  if (rgb.indexOf('rgb') > -1) {
    // rgb(x, y, z)
    const color = rgb.replace(/(?:\(|\)|rgba|RGBA)*/g, '').split(',') // 把 x,y,z 推送到 color 数组里
    let hex = '#'
    for (let i = 0; i < 3; i++) {
    // 'Number.toString(16)' 是JS默认能实现转换成16进制数的方法.
    // 'color[i]' 是数组，要转换成字符串.
    // 如果结果是一位数，就在前面补零。例如： A变成0A
      hex += ('0' + Number(color[i]).toString(16)).slice(-2)
    }
    return hex
  } else {
    return rgb
  }
}

changeThemeColor 设置主题颜色

rgbToHex rgba转hex 因为项目中之前配置的颜色有rgba的所以这边需要转译下 forElementUI.getElementUISeries 只支持 hex 

为了便于用户配置对应的主题色，我这边设置的是对象，对应element-ui的五个按钮色调

步骤四 

调用 changeThemeColor方法

在main.js里初始化调用initThemeColor

 注意事项

如果运行提示生成的css文件未找到，一般都是由于vue.config.js里的这块设置的颜色没有对应的主题色

 之前参考网上的文章无法做到一对一的改变，是因为没有一一对应，需使用forElementUI.getElementUISeries方法实现对应

 项目中用到webpack ModuleFederationPlugin实现分包，多项目编译时，导致其中一个项目中主题css文件找不到，需要在themColorClient.js中配置如下

window.g.VUE_DYD_CONFIG_URL为另外一个项目的访问地址，如当前项目本地服务为localhost:8081，另一个项目为localhost:8082,则这块配置为localhost:8082，这块个人觉得跟ModuleFederationPlugin remotes有关，有了解朋友欢迎一起讨论