前言

本计划对于微前端架构我的项目，针对不同业态可展现不同的主题。

示例我的项目采纳vue2.0+vant

思路：
1.依据css伪类 :root配置全局变量，按照vant定制主题，在覆盖文件中取变量值进行笼罩。
2.主框架通过URL携带色值作为参数传给子利用，子利用在页面加载结束后更新页面根元素定义的css变量，从而更新我的项目中所有对该变量的援用。

  1. 引入款式源文件

    //babel.config.jsmodule.exports = {  plugins: [ [   'import',   {     libraryName: 'vant',     libraryDirectory: 'es',     // 指定款式门路     style: (name) => `${name}/style/less`,   },   'vant', ],  ],};

  2. 批改款式变量

    // vue.config.jsconst path = require('path')const themePath = path.join(__dirname, './src/assets/css/theme.less')module.exports = {  css: { loaderOptions: {   less: {     // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，间接配置选项。     lessOptions: {       modifyVars: {         // 间接笼罩变量         'text-color': '#111',         'border-color': '#eee',         // 或者能够通过 less 文件笼罩（文件门路为绝对路径）         hack: `true; @import "${themePath}";`       }     }    } }  }};

  3. APP.vue中定义全局变量默认值

    <style>/*如果须要定义多个全局变量，也可独自搁置在独立的less文件中在此援用即可*/:root { --color-primary: #fc950b;}</style>

  4. theme.less文件中用全局变量笼罩vant默认款式

    /*具体参照vant自定义主题的配置表，按需笼罩*/@button-primary-background-color: var(--color-primary);@button-primary-border-color:  var(--color-primary);

  5. 取url中的色值，批改根元素变量值

    /*在适合的地位，如APP.vue的mounted钩子函数中，取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)"}