前言
因为项目采用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有关,有了解朋友欢迎一起讨论