子应用CSS不能直接<link>或import全局样式，否则必然污染——因CSS天生全局生效；404源于构建路径（如/css/）与实际部署路径（如/subapp-order/css/）不匹配，需动态配置publicPath或build.base，并验证entry一致性。
子应用 CSS 不能直接 <link rel="stylesheet"> 或 import 全局样式，否则必然污染主应用或其他子应用——这不是配置没开对，而是浏览器根本不管你是微前端，CSS 就是全局生效的。
为什么子应用的 <link> 会 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路径一致
如何让子应用 CSS 真正「只作用于自己」？
靠 experimentalStyleIsolation: true 不够，尤其对 Element Plus、Bootstrap 这类 UI 框架——它们的类名前缀相同（如 .el-input__inner），后加载的样式直接覆盖前者。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- UI 框架必须加命名空间：ElementPlus 初始化时传入
{ namespace: 'ep' }，类名变成ep-button；同步改 SCSS 变量，用@forward 'element-plus/...' with ($namespace: 'ep') - 第三方 CSS（如 Bootstrap）不能只加
<body class="bootstrap-iso">，要重编译源码：.bootstrap-iso { @import "bootstrap/scss/bootstrap"; } - JS 组件（Modal、Dropdown）需显式传入带前缀的选择器：
new Modal(document.querySelector('.bootstrap-iso .modal'))
怎么动态加载并重写子应用 CSS 规则？
禁用子应用的原始 <link>，改用 JS 动态加载，并用 postcss-prefix-selector 在构建时重写所有规则（如 .btn → .micro-app-a .btn），再注入到子应用容器内。
立即学习“前端免费学习笔记（深入）”；
- 主应用容器上加
all: initial，切断字体、颜色、行高、margin 等继承链，防止子应用透传影响主应用排版 - 子应用挂载后可遍历
document.styleSheets，对无法控制的第三方样式（如 ant-design）手动补前缀：.micro-app-a .ant-btn - Shadow DOM 是终极隔离手段，但需配合
insertCss钩子拦截动态<style>并重写选择器，否则仍会漏掉
真正落地的关键不是“选哪个方案”，而是分层补位：构建时加前缀 + 运行时切断继承 + UI 框架显式命名空间 + 第三方 CSS 重编译。漏掉任何一层，都可能在某个切换路径下突然出现边框消失、字体错乱这类难复现的问题。
