微前端: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: {
        scss: {
          // 全局注入变量/混合宏(路径需根据项目调整)
          // additionalData: `@import "@/styles/variables.scss";`,
          additionalData: `@use "@/assets/styles/element/index.scss" as *;`,
          // 解决旧版 API 警告(Sass 版本兼容)
          api: 'modern-compiler',
        },
      },

到这里后,还有一点比较坑,我相信很多人也遇到了,就是配置完 依然不起作用,样式还是乱的,一步一深坑,跟着官方文档也得踩。其实答案就在你的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';

然后重新启动项目就🆗,前人踩坑后人乘凉..........

相关推荐
Canace几秒前
浏览器渲染原理概述
前端·性能优化·浏览器
啃火龙果的兔子8 分钟前
前端八股文性能调优篇
前端·前端框架
JarvanMo11 分钟前
停止与 Compose 导航作斗争(这 5 个技巧将改变一切)
前端
trsoliu22 分钟前
前端周刊第437期:AI编程助手、WebGPU实战与React生态新动态
前端
trsoliu27 分钟前
2025年Web前端前沿技术动态:WebGL动画、CSS View Transitions与HTML隐藏API
前端·javascript·css
trsoliu30 分钟前
2025年Web前端最新趋势:React基金会成立、AI编码助手崛起与Astro极速搜索
前端·javascript·react.js
一 乐33 分钟前
商城推荐系统|基于SprinBoot+vue的商城推荐系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·后端·商城推荐系统
亿元程序员38 分钟前
为什么游戏公司现在都喜欢用protobuf?
前端
鹏多多41 分钟前
React瀑布流Masonry-Layout插件全方位指南:从基础到进阶实践
前端·javascript·react.js
fruge1 小时前
前端数据可视化实战:Chart.js vs ECharts 深度对比与实现指南
前端·javascript·信息可视化