微前端做样式隔离

最近做了一个微前端的项目，用的乾坤框架。其实框架里面可以配置沙箱属性， 做到样式隔离。但是别的小伙伴把这个配置关了，并且在他们的微应用里做了大量样式修改。最要命的在主应用中还把UI框架的一些组件样式做了全局更改，最后导致我开发的那个微应用，由于UI框架样式同名总是产生样式错乱，所以不得不去修改我子应用的UI框架命名。

不过幸好我的微应用用的Element-Plus，里面支持自定义命名，而且只用简单的配置一下。如果是别的UI库，还需要安装依赖再在webpack中做一些配置替换。即便如此还是遇到了一些问题，这里简单记录梳理下。

1. 设置 ElConfigProvider

使用 ElConfigProvider 包装根组件。

<!-- App.vue -->
<template>
	<el-config-provider namespace="ep">
		<!-- ... -->
	</el-config-provider>
</template>

2. 设置 SCSS 和 CSS 变量

创建 styles/element/index.scss：

// styles/element/index.scss
// 自定义命名前缀, 默认是 'el'
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
	$namespace: 'ep'
);
// ...

3. 在 config 文件中引入

两种脚手架的配置，略有不同

• vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	//...
	css: {
		loaderOptions: {
			scss: {
				additionalData: `@use "~@/styles/element/index.scss" as *;`,
			},
		},
	},
})

• vite.config.js

import { defineConfig } from 'vite'
export default defineConfig({
	// ...
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `@use "~/styles/element/index.scss" as *;`,
			},
		},
	},
	// ...
})

此时项目运行大部分组件的前缀名称已经被替换，但是像 Elmessage、ElMessageBox···这些单独引入的组件的前缀并没有修改，需要在全局单独引入一下它们的样式文件。

查了下 element-plus 的官方 git 上也有人提过这个 issue，但是一直没解决，所以暂时这么做。以后说不定会修复

main.js

//...
import 'element-plus/theme-chalk/el-message.css'
// base.css 文件必须引入, 它内部定义了样式变量color等, 上面文件会引用到
import 'element-plus/theme-chalk/base.css'
//...