微前端：qiankun框架在开发中遇到的问题

基座是Vue3.0 + element plus配合 子应用 Vue2.0 + element ui导致的样式冲突问题

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

 首先在App.vue中定义：namespace="ep"；具体代码如下：

1. <template>
2.   <el-config-provider namespace="ep">
3.     <RouterView />
4.   </el-config-provider>
5. </template>

复制代码

其次设置 SCSS 和 CSS 变量，创建 /src/assets/styles/element/index.scss, index.scss具体内容如下：

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

复制代码

因为我使用的是 qiankun + vue3.0 + webpack，所以需要在webpack 的 preprocessorOptions 中设置。找到vite.config.js文件，

preprocessorOptions 中设置 additionalData: `@use "@/assets/styles/element/index.scss" as *;`,

具体修改内容如下：

1.     css: {      preprocessorOptions: {<template>
2.   <el-config-provider namespace="ep">
3.     <RouterView />
4.   </el-config-provider>
5. </template>scss: {<template>
6.   <el-config-provider namespace="ep">
7.     <RouterView />
8.   </el-config-provider>
9. </template>  // 全局注入变量/混合宏（路径需根据项目调整）<template>
10.   <el-config-provider namespace="ep">
11.     <RouterView />
12.   </el-config-provider>
13. </template>  // additionalData: `@import "@/styles/variables.scss";`,<template>
14.   <el-config-provider namespace="ep">
15.     <RouterView />
16.   </el-config-provider>
17. </template>  additionalData: `@use "@/assets/styles/element/index.scss" as *;`,<template>
18.   <el-config-provider namespace="ep">
19.     <RouterView />
20.   </el-config-provider>
21. </template>  // 解决旧版 API 警告（Sass 版本兼容）<template>
22.   <el-config-provider namespace="ep">
23.     <RouterView />
24.   </el-config-provider>
25. </template>  api: 'modern-compiler',<template>
26.   <el-config-provider namespace="ep">
27.     <RouterView />
28.   </el-config-provider>
29. </template>},      },

复制代码

到这里后，还有一点比较坑，我相信很多人也遇到了，就是配置完 依然不起作用，样式还是乱的，一步一深坑，跟着官方文档也得踩。其实答案就在你的main.js里；一般引入 element-plus 时，我们用的是

1. import ElementPlus from 'element-plus';
2. import 'element-plus/dist/index.css';

复制代码

需要注意的是：index.css是编译压缩过的，还用这个样式就等于没了，因为我们换了前缀命名，index.css还是默认 el 的；需要改为引入 import 'element-plus/theme-chalk/src/index.scss'; 

main.js文件修改如下：

1. //import 'element-plus/dist/index.css'
2. import 'element-plus/theme-chalk/src/index.scss';

复制代码

然后重新启动项目就
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

yyds。多谢分享