qiankun 的 styleisolation 无法彻底解决 css 冲突，因其仅劫持 dom 插入，对 @import、css-in-js、innerhtml 拼接、ui 框架类名共享及静态资源路径错配均无效；需四层对齐：动态 publicpath、ui 框架命名空间、主应用基础样式收口、构建产物路径校验。
单纯开启 strictStyleIsolation 或 experimentalStyleIsolation 无法彻底解决子应用 CSS 冲突——它只拦得住标准 <style></style> 插入，拦不住 @import、CSS-in-JS、innerHTML 拼接、UI 框架类名共享和静态资源路径错配。
为什么 qiankun 的 styleIsolation 经常“看起来开了却没用”
这个配置本质是劫持 DOM 插入行为，不是重写整个样式系统。以下场景它完全不生效：
- 子应用 JS 里写
document.head.innerHTML += '<style>.btn{color:red}</style>'—— 绕过所有劫持逻辑 - 用
styled-components或emotion：它们通过insertRule直接写入CSSStyleSheet，不走appendChild - CSS 文件里含
@import "reset.css"：qiankun 不解析、不重写、不拦截嵌套引入 - 主应用提前加载了
normalize.css，子应用的button { margin: 0 }被覆盖 —— 这是加载顺序导致的规则覆盖，沙箱无从干预 - Vue2 + ElementUI 和 Vue3 + ElementPlus 同时存在：
.el-input__inner类名被后加载的样式直接覆写，权重再高也压不住已写死的规则
必须强制 UI 框架启用命名空间（以 ElementPlus 为例）
类名冲突不是“样式没隔离”，而是“两个框架用了同一套 class 前缀，浏览器照单全收”。不改类名，其他隔离全是补丁。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在子应用
main.ts初始化时传入{ namespace: 'ep' }，让所有组件生成ep-button、ep-input等类名 - 新建
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，确保构建时全局生效 - 漏掉任一环，产物里仍是
el-开头，隔离就白做了
静态资源路径错配导致 CSS 404 的真实原因
子应用构建产物中若 CSS 是绝对路径（如 /css/app.abc123.css），嵌入主应用后会向根域请求，但实际部署在子应用专属路径下（如 /subapp-order/css/app.abc123.css），结果就是 404 —— 表现为样式“完全不生效”。
- Webpack 子应用：设置
publicPath为运行时动态值，例如process.env.NODE_ENV === 'production' ? '/subapp-order/' : '/' - Vite 子应用：配置
build.base，同样区分环境，window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - 检查构建产物中所有
<link href="...">的路径，确认与主应用注册子应用时的entry完全一致 - 路径不一致 = 样式根本没加载，隔离再严也没意义
禁用子应用全局样式导入 + 主应用统一提供基础样式
子应用写 import 'element-plus/dist/index.css' 或 <link href="/css/ant-design.css"> 是高危操作：qiankun 不去重，多个子应用引入同一份 CSS，DOM 中出现多份 identical 的 <style></style> 标签，加载顺序决定谁赢。
- 主应用统一打包并预加载
normalize.css、字体、重置样式等基础样式 - 子应用移除所有非业务必需的全局样式
import，只保留模块级或组件级样式 - 若必须局部引入第三方样式，改用 CSS Modules 或
<style scoped></style>封装 - 对 CSS 自定义属性（
--color-primary）强制加 app-id 前缀，如--mf-order-header-bg，禁止 JS 内联写style="--color-primary"
真正难的不是加开关，而是四层对齐：动态 publicPath、UI 框架命名空间重编译、主应用基础样式收口、构建产物路径校验。漏掉一层，CSS 就可能在某个用户、某次切换、某个浏览器里突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
