Vite子应用必须用postcss-prefix-selector插件为所有CSS规则加前缀（如.subapp-order .btn），因其不支持styledIsolation，且<link>、@import、CSS-in-JS等均逃逸至全局head导致污染。
直接 import 第三方 CSS 或用 <link rel="stylesheet"> 加载，必然污染全局——浏览器根本不识别“微前端”，所有样式规则都进 document 的全局样式表，后加载的子应用会覆盖先加载的，没有例外。
为什么 styledIsolation 开了也没用
它只控制 <style> 标签挂载位置（比如塞进 shadowRoot），不改写选择器、不拦截 @import、不处理 <link href> 和 CSS-in-JS 动态插入的样式。这些全都会逃逸到主文档 <head>，浏览器照常解析生效。
-
styledIsolation: true在 Vite 子应用中基本无效：Vite 的 CSS 注入走的是import 'xxx.css'→ 插入<style>标签路径，qiankun 劫持不到 -
strictStyleIsolation: true强制用 closed Shadow DOM，但所有document.querySelector必须改成shadowRoot.querySelector，否则查不到元素 - 旧版 Safari 不支持
CSSStyleSheet.adoptedStyleSheets，会直接降级为无隔离
Vite 子应用必须用 postcss-prefix-selector 加前缀
这是目前对 Vite 最可靠、最可控的隔离方式：在构建阶段自动给所有 CSS 规则加专属命名空间前缀，比如把 .btn 变成 .subapp-order .btn，让样式天然限定在子应用容器内。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在
postcss.config.js中配置：postcss-prefix-selector插件，指定前缀如.subapp-order - 确保该插件在
tailwindcss之后、autoprefixer之前执行，否则 Tailwind 生成的类可能被漏掉 - 禁用子应用中所有
<link rel="stylesheet">—— 改为 JS 动态加载并注入到自身容器节点：container.appendChild(styleEl) - 验证方式：DevTools 搜索
.subapp-order，确认所有规则都带该前缀，且无裸露的.btn或.el-button
第三方 UI 框架必须重编译或配 namespace
Element Plus、Bootstrap 这类库的类名是硬编码的，靠运行时加 class 或 postcss 替换前缀不可靠，容易漏掉伪类、动画、CSS 变量等。
立即学习“前端免费学习笔记（深入）”；
- Element Plus：初始化时传
{ namespace: 'ep' }，再通过@forward ... with ($namespace: 'ep')重定义 SCSS 变量，并用additionalData全局注入 - Bootstrap：不能只给
<body>加class="bootstrap-iso"，必须新建bootstrap-iso.scss，内容为.bootstrap-iso { @import "bootstrap/scss/bootstrap"; }，再注入构建流程 - CSS Custom Properties（如
--bs-primary）不会被前缀影响，需手动在命名空间块内重新定义：.bootstrap-iso :root { --bs-primary: #0d6efd; } - JS 组件（Modal、Dropdown）默认只认原始选择器，必须显式传入带前缀的 DOM 节点：
new Modal(document.querySelector('.bootstrap-iso .modal'))
真正难的不是加前缀，而是所有环节要对齐：构建工具链（PostCSS 配置顺序）、UI 库编译方式（SCSS 命名空间注入）、JS 组件调用方式（选择器补前缀）、静态资源路径（build.base 或 publicPath 动态适配）。漏掉任何一环，污染就从缝隙里钻出来。
