子应用CSS引入冲突本质是资源路径、作用域和加载时机三者错配，需通过动态publicPath/base配置、UI框架命名空间隔离、主应用统一提供基础样式及禁用子应用全局样式导入来系统解决。
子应用 CSS 引入冲突不是“谁先加载谁赢”的问题，而是资源路径、作用域和加载时机三者错配的结果。直接在子应用里 import 或 link 全局样式（尤其 UI 框架）几乎必然引发污染。
子应用静态资源路径未适配导致 404 和样式丢失
子应用构建产物中的 CSS 文件若用绝对路径（如 /css/app.abc123.css），嵌入主应用后会向根路径请求资源，而实际资源部署在子应用专属前缀下（如 /subapp-order/css/app.abc123.css），结果是 404 —— 表现为样式完全不生效，或部分组件“裸奔”。
- Webpack 子应用必须配置
publicPath：设为运行时动态值，例如process.env.NODE_ENV === 'production' ? '/subapp-order/' : '/' - Vite 子应用需设置
base：同样区分环境，build.base = window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - 检查构建产物中所有
link标签的href，确认其路径与主应用中子应用注册时的entry域名/路径一致
UI 框架全局样式未隔离引发类名覆盖
Vue2 + ElementUI 主应用与 Vue3 + ElementPlus 子应用共存时，.el-input__inner 这类共享前缀的类名会被后加载的样式直接覆盖，表现为输入框边框消失、按钮颜色错乱等——这不是沙箱能拦截的问题，因为样式规则已写入 DOM。
- 子应用禁用 ElementPlus 默认命名空间：在
main.ts中传入{ namespace: 'ep' }，让所有组件类名变为ep-button、ep-input - 同步修改 SCSS 变量：新建
src/styles/element/index.scss，内容为@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'); - 确保构建时全局注入该 SCSS：Vite 配置
css.preprocessorOptions.scss.additionalData，Webpack 配置sass-loader.additionalData
多个子应用同时引入同一份 CSS 文件（如 normalize.css）
当两个子应用都通过 import 'normalize.css' 加载相同文件，qiankun 不会去重，最终 DOM 中出现两份 identical 的 <style></style> 标签。虽不影响渲染，但浪费带宽、增加解析开销，且可能因加载顺序不同导致伪随机覆盖。
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
立即学习“前端免费学习笔记（深入）”；
- 主应用统一提供基础样式：将
normalize.css、字体、重置样式等打包进主应用 CSS，子应用不再重复引入 - 子应用移除所有非业务必需的全局样式 import，只保留模块级或组件级样式（如
Button.module.css） - 若必须由子应用控制，使用动态
loadScript+ 缓存标记：检查document.head.querySelector('link[href*="normalize"]')是否存在，避免重复插入
实验性样式隔离（experimentalStyleIsolation）失效的常见原因
开启 experimentalStyleIsolation: true 后仍出现样式泄漏，往往不是功能 bug，而是规则未命中或被绕过。
- 该机制仅处理
<style></style>标签和style属性，对link引入的外部 CSS 无效 —— 必须确保 CSS 是内联或通过 JS 动态注入 - 子应用若用
document.write或直接操作document.head.appendChild插入样式，会逃逸隔离逻辑 - 第三方库（如某些图表库）内部动态创建
style标签，且未走 qiankun 沙箱代理，需手动包裹或替换为 CSS Modules 版本
真正麻烦的从来不是“怎么加样式”，而是“样式什么时候、以什么形式、在哪个作用域里生效”。微前端里，CSS 不是装饰，是契约——每个子应用必须明确声明自己的样式边界，否则冲突不是会不会发生，只是时间问题。
