qiankun中主子应用CSS冲突本质是后加载样式直接覆盖前加载规则，strictStyleIsolation无法拦截innerHTML拼接、CSS-in-JS、@import嵌套及类名共享等场景，须通过ElementPlus命名空间三件套（main.ts配置+SCSS变量重写+构建工具注入）和动态publicPath/base路径校验联合解决。
qiankun 里主应用和子应用的 CSS 冲突，不是“谁先加载谁生效”，而是“后写的规则直接覆盖前写的”，浏览器照单全收，沙箱拦不住。靠 strictStyleIsolation 或 experimentalStyleIsolation 都不能根治——尤其当双方都用 el- 这类通用前缀时，冲突必然发生。
为什么 strictStyleIsolation 对 UI 框架无效
strictStyleIsolation 只劫持动态插入的 <style> 和 <link rel="stylesheet">，但对以下情况完全无感：
- 子应用 JS 中拼字符串写入
document.head.innerHTML += '...'（绕过劫持） -
ElementPlus或Ant Design的样式由构建时 SCSS 编译生成，直接注入 DOM，不走运行时插入流程 - 主应用已加载
element-ui全局 CSS，子应用再加载element-plus，两者类名都是el-input__inner，后加载的规则直接覆盖前者 - 即使开了 Shadow DOM，
el-config-provider等组件仍会把样式挂到document.head，脱离 Shadow 树作用域
必须改类名前缀：ElementPlus namespace 配置三件套
让子应用的 el-button 变成 ep-button，从源头切断冲突链。只配 namespace: 'ep' 不够，漏掉任一环都会失效：
- 在
main.ts初始化时传参：app.use(ElementPlus, { namespace: 'ep' }) - 新建
src/styles/element/index.scss，内容为：@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'); - Vite 用户：在
vite.config.js的css.preprocessorOptions.scss.additionalData中注入该文件；Webpack 用户：在sass-loader的additionalData里配置相同路径
构建后检查产物中所有 class 名，确认是 ep-button 而非 el-button；否则说明 SCSS 变量未生效。
静态资源路径错配导致 CSS 404
子应用构建产物中若 CSS 是绝对路径（如 /css/app.abc123.css），嵌入主应用后会向根域请求，但实际部署在子应用路径下（如 /subapp-order/css/app.abc123.css），结果就是 404 —— 表现为样式“完全不生效”。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- Webpack 子应用：设置
publicPath为运行时动态值，例如process.env.NODE_ENV === 'production' ? '/subapp-order/' : '/' - Vite 子应用：配置
build.base，例如window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - 构建后打开产物
index.html，检查所有<link href>的路径是否与主应用注册子应用时的entry一致
主应用统一提供基础样式，子应用禁用全局 import
多个子应用都 import 'normalize.css'，qiankun 不会去重，DOM 中出现多份 identical 的 <style>，加载顺序决定谁赢，结果不可控。
- 主应用打包并注入
normalize.css、字体、重置样式等基础 CSS - 子应用移除所有
import 'xxx.css'（尤其是 UI 框架的 dist CSS） - 子应用只 import 组件 JS，样式全部走命名空间版或 CSS Modules 封装
- 检查子应用构建产物的
index.html，确认没有<link rel="stylesheet">指向全局路径
真正麻烦的从来不是“样式没加”，而是“加了但不该加”——比如子应用悄悄 import 了一份 ant-design/dist/reset.css，它不会报错，但会在某个深夜悄悄抹掉主应用的按钮圆角。
