微前端（qiankun）子应用样式影响其他应用样式

产生现象：

由于element-ui和element-plus前缀相同、命名规则相同，但内部部分样式实现方式不同，从而导致使用element-ui的样式会被污染，页面样式混乱

应用搭建：

主应用及部分子应用：vue2、element-ui、webpack

某个子应用：vue3、element-plus、vite

解决方法：自定义EP命名空间

element-plus默认命名空间为el，el会作为其编译后的class名及css前缀。支持自定义命名：

1.  使用 ElConfigProvider 包装根组件，修改namespace属性

   <!-- App.vue -->
   <template>
     <el-config-provider namespace="elplus">
         <router-view />
     </el-config-provider>
   </template>

2.  创建 styles/el-namespace.scss，设置SCSS变量（以elplus为前缀）

   @forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
     $namespace: 'elplus'
   );

3. vite.config配置中导入styles/el-namespace.scss

   import { defineConfig } from 'vite'
   // https://vitejs.dev/config/
   export default defineConfig({
     // ...
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: '@use "@/styles/el-namespace.scss" as *;',
         },
       },
     },
     // ...
   })

4. 如果element-plus组件是按需自动导入，需要补充配置以指示element-plus使用预处理样式

   import { defineConfig } from 'vite'
   // https://vitejs.dev/config/
   export default defineConfig({
     // ...
     plugins: [
       // ...
       AutoImport({
         resolvers: [ElementPlusResolver({
           importStyle: 'sass' // 指示element-plus使用预处理样式
         })],
       }),
       Components({
         resolvers: [ElementPlusResolver({
           importStyle: 'sass' // 指示element-plus使用预处理样式
         })],
       }),
     ],
     // ...
   })

修改后效果：

使用element-ui的主应用及部分子应用： 

 使用element-plus的子应用：（以elplus为前缀）