桂册 发表于 2025-9-26 11:50:34

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

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

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

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

<template>
<el-config-provider namespace="ep">
    <RouterView />
</el-config-provider>
</template>其次设置 SCSS 和 CSS 变量,创建 /src/assets/styles/element/index.scss, index.scss具体内容如下:

@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
$namespace: 'ep'
);因为我使用的是 qiankun + vue3.0 + webpack,所以需要在webpack 的 preprocessorOptions 中设置。找到vite.config.js文件,

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

具体修改内容如下:

    css: {      preprocessorOptions: {<template>
<el-config-provider namespace="ep">
    <RouterView />
</el-config-provider>
</template>scss: {<template>
<el-config-provider namespace="ep">
    <RouterView />
</el-config-provider>
</template>// 全局注入变量/混合宏(路径需根据项目调整)<template>
<el-config-provider namespace="ep">
    <RouterView />
</el-config-provider>
</template>// additionalData: `@import "@/styles/variables.scss";`,<template>
<el-config-provider namespace="ep">
    <RouterView />
</el-config-provider>
</template>additionalData: `@use "@/assets/styles/element/index.scss" as *;`,<template>
<el-config-provider namespace="ep">
    <RouterView />
</el-config-provider>
</template>// 解决旧版 API 警告(Sass 版本兼容)<template>
<el-config-provider namespace="ep">
    <RouterView />
</el-config-provider>
</template>api: 'modern-compiler',<template>
<el-config-provider namespace="ep">
    <RouterView />
</el-config-provider>
</template>},      },到这里后,还有一点比较坑,我相信很多人也遇到了,就是配置完 依然不起作用,样式还是乱的,一步一深坑,跟着官方文档也得踩。其实答案就在你的main.js里;一般引入 element-plus 时,我们用的是

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

main.js文件修改如下:

//import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/src/index.scss';然后重新启动项目就
来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

汇干环 发表于 前天 00:42

yyds。多谢分享
页: [1]
查看完整版本: 微前端:qiankun框架在开发中遇到的问题