主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色的css，然后根据配置动态生成替换后的css。theme-color-replacer')constforElementUI=require('webpack-theme-color-replacer/forElementUI')constconfig=require('../src/config/appConfig')module.exports=newThemeColorReplacer({fileName:'css/theme-colors.[contenthash:8].css',matchColors:[...forElementUI.getElementUISeries(config.themeColor),//element-ui主色系列//'#0cdd3a',//自定义颜色],changeSelector:forElementUI.changeSelector,isJsUgly:process.env.NODE_ENV!=='development',//injectCss:false,//resolveCss(resultCss){//可选。根据需要解析结果css代码。//返回resultCss+youCssCode//}})matchColors数组可以配置多个要替换的自定义主题颜色2.添加这个插件constthemePlugin=require('./webpack/themePlugin');vue.config.js中的模块.exports={configureWebpack:{插件:[主题插件]}}3。创建一个新文件themeColorClient.js从'webpack-theme-color-replacer/client'导入客户端从'webpack-theme-color-replacer/forElementUI'导入forElementUI从'@/config/appConfig'导入appConfigthemeColor//动态切换主题颜色exportfunctionchangeThemeColor(newColor){varoptions={newColors:[...forElementUI.getElementUISeries(newColor)],}returnclient.changer.changeColor(options,Promise).then(()=>{curColor=newColorlocalStorage.setItem('theme_color',curColor)});}导出函数initThemeColor(){constsavedColor=localStorage.getItem('theme_color')if(savedColor){curColor=savedColorchangeThemeColor(savedColor)}}4.调用initThemeColor初始化颜色changeThemeColor改变主题颜色import{initThemeColor,changeThemeColor}from'./utils/themeColorClient'initThemeColor()changeThemeColor('#F56C6C')//传入的颜色格式应该是十六进制颜色当前不支持值、“红色”和类似颜色。详情请参考https://github.com/hzsrc/vue-...
