主题

基座的一个重要职能就是统一整个 PC 端管理后台的视觉呈现。

在旧的系统中，主题重复分散在各个子应用中，这导致更新维护起来比较麻烦，常常会出现视觉不统一的情况。

举个例子，在项目交付时，需要针对客户的需求和企业特色定义视觉，旧的系统中，我们需要对每个子应用都进行更新，然后再打包部署。这种工作繁琐且无聊。

现在由我们的基座来做这件事情，我们甚至可以做到不停机一键切换。

为了实现主题的灵活配置，基座做了以下调整：

统一定义的 CSS 变量： CSS 变量是运行时变量，而 SCSS、Less 变量需要静态编译
组件库样式包外置：组件库的样式包不再编译并内嵌在基座和子应用中, 从而实现按需插拔
主题包机制：主题包是一个提供 CSS、JS 以及相关静态资源的 npm 包。配合我们的微前端运行容器, 可以实现一键挂载

统一定义的 CSS 变量

定义了一套 CSS 变量集

css

:root{

}

我们规定：无论什么时候，你都应该优先使用这套CSS 变量集, 而不是:

引用 SCSS/Less 的静态变量
引用 ElementUI 这些组件库暴露出来的变量
硬编码主题色

注意

为什么不推荐引用 SCSS/Less 的变量?

因为这些变量是静态的，调整这些变量需要重新编译。而 CSS 变量集由主题包提供，并挂载在基座中，这些变量支持运行时修改和切换, 子应用不需要变更任何代码。

WARNING

为什么不推荐引用 ElementUI/ElementPlus 的变量?

我们的提供的变量更加中立，不耦合任何框架。维护起来更轻松。

组件库样式包外置

为了实现主题动态切换，子应用、基座都不需要再导入 element-ui、element-plus 等相关组件库的 CSS 样式表。而是外置到主题包中维护。

因此，子应用集成到基座时应该把相对应的组件库样式导入移除:

TIP

element-ui

-import 'element-ui/lib/theme-chalk/index.css';

TIP

element-plus完整导入，移除:

-import 'element-plus/dist/index.css'

如果是 element-plus，且使用到了按需组件导入的功能，需要关闭样式导入：

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver({importStyle: false})],
    }),
    Components({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [ElementPlusResolver({importStyle: false})],
    }),
  ],
}

如果是手动导入，则不需要再安装 unplugin-element-plus 插件了。

WARNING

还有一个重要的事情。我们推荐新的项目使用 vue3 + element-plus, 但是，element-ui、element-plus 的样式并不兼容。。

为了避免样式冲突，我们规定，element-plus 统一使用 ep 命名空间, 因此你的子应用需要做以下配置:

import { RouterView } from 'vue-router';
+import { ElConfigProvider } from 'element-plus';

export default () => (
+  <ElConfigProvider namespace="ep">
    <RouterView />
+  </ElConfigProvider>
);

主题包

我们定义了一套主题包机制，通过主题包可以定制以下内容：

主题变量
组件库样式、页面样式
图片(比如 Logo)、文案
语言包
扩展 Javascript 代码
其他配置参数

WARNING

注意: 无法通过主题包覆盖某些 Vue 页面，我们认为这些需求属于定制化需求。主题包仅限于样式、文案等层面的干预

主题 ​

统一定义的 CSS 变量 ​

组件库样式包外置 ​

主题包 ​

主题

统一定义的 CSS 变量

组件库样式包外置

主题包