前言本方案可以针对微前端架构项目，针对不同的业务业态展示不同的主题。示例工程采用vue2.0+vant的思路：1.根据css伪类:root配置全局变量，根据vant自定义主题，覆盖覆盖文件中的变量值。2、主框架通过URL将颜色值作为参数发送给子应用，子应用在页面加载后更新页面根元素定义的css变量，从而更新所有对项目中的变量。导入样式源文件//babel.config.jsmodule.exports={plugins:[['import',{libraryName:'vant',libraryDirectory:'es',//指定样式路径style:(name)=>`${name}/style/less`,},'vant',],],};修改样式变量//vue.config.jsconstpath=require('path')constthemePath=path.join(__dirname,'./src/assets/css/theme.less')module.exports={css:{loaderOptions:{less:{//如果less-loader版本低于6.0，请移除lessOptions级别并直接配置选项。lessOptions:{modifyVars:{//less文件覆盖（文件路径为绝对路径）hack:`true;@import"${themePath}";`}}}}}};defineglobalvariablesdefaultvalueinAPP.vuetheme.less文件中，使用全局变量覆盖vant默认样式/*参考vant自定义主题的配置表，按需覆盖*/@button-primary-background-color:var(--color-primary);@button-primary-border-color:var(--color-primary);取url中的颜色值，修改根元素的变量值/*在合适的位置，比如APP.vue的挂载钩子函数中，取url链接中的颜色值，替换为的变量值根元素。例如当前子应用的url为http://www.segmentfault.com/index.html?color=fc950b。本例中urlParams()是获取自己封装的URL中参数的方法*/document.documentElement.style.setProperty("--color-primary",`#${urlParams().color}`);至此，动态切换主题色的功能就完成了，只需在主框架中确定子应用的主题色，并在url中作为参数传递给子应用，子应用即可-应用程序可以动态切换主题颜色，无需重新打包和部署。其他UI框架也可以参考同样的思路。如果项目中涉及图标、背景图等静态资源，可以在theme.less文件中定义不同的类名，根元素类名可以根据主框架url中的其他标识动态设置即可。:root.theme_a{--color-primary:#000;--banner_a:"url(../../static/images/banner_1.jpg)"}:root.theme_b{--color-primary:#333;--banner_b:"url(../../static/images/banner_2.jpg)"}
