strictstyleisolation无法彻底杜绝样式冲突，因其仅劫持动态dom插入行为，对构建时已编译css、@import嵌套、document.stylesheets操作、主应用全局样式覆盖及shadow dom外挂组件等场景完全失效。
strictStyleIsolation 为什么不能“彻底杜绝”样式冲突
它只劫持 document.head.appendChild 和 document.createElement('style') 这类动态插入行为，但对以下场景完全失效：
- 子应用构建时已编译进产物的 CSS（如
element-plus/theme-chalk的 SCSS 输出），直接写入 DOM，不走运行时插入流程 -
@import规则嵌套在 CSS 文件内部，沙箱不解析、不重写 - 第三方库用
document.styleSheets[0].insertRule或直接操作sheet.cssRules注入样式 - 主应用已加载
normalize.css或el-input__inner类，子应用再加载同名规则，浏览器照单覆盖
Shadow DOM 看似彻底，但 el-config-provider、ElMessage 等组件仍会把样式挂到 document.head，脱离 shadowRoot 作用域。
Vite 子应用启用 experimentalStyleIsolation 基本无效
Vite 的 CSS 加载走 ES 模块链：import './index.css' → 构建时转为 <link rel="stylesheet"> → 插入 head。qiankun 的劫持点在 JS 动态插入，而这个 link 是 HTML 解析器原生加载的，沙箱根本捕获不到。
实操建议：
- 禁用
experimentalStyleIsolation: true，它对 Vite 项目无实际隔离效果 - 改用
postcss-prefix-selector插件，在构建时批量重写所有类名选择器 - 确保插件配置生效：检查最终产物中
.el-button是否已变为.subapp-order-el-button
ElementPlus 必须配 namespace 三件套，漏一不可
只在 main.ts 写 app.use(ElementPlus, { namespace: 'ep' }) 不够——SCSS 编译阶段仍用默认前缀，产物里还是 el-button。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
必须同步完成三项配置：
- 初始化传参：
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配置相同路径
构建后立刻检查 dist 目录下 CSS 文件，确认所有类名是 ep-button 而非 el-button；否则说明 SCSS 变量未穿透。
publicPath/base 不匹配会导致样式 404，不是冲突而是丢失
子应用 CSS 文件若用绝对路径（如 /css/app.abc123.css），嵌入主应用后请求的是根域名下的路径，而真实资源部署在子应用专属路径下（如 /subapp-order/css/app.abc123.css），结果是 404 —— 表现为样式“全丢”，误以为是隔离失败。
实操要点：
- Webpack 子应用：设置
publicPath: window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - Vite 子应用：设置
build.base = window.__POWERED_BY_QIANKUN__ ? '/subapp-order/' : '/' - 构建后打开浏览器开发者工具，检查所有
<link>标签的href，确认其路径与主应用注册子应用时的entry一致
真正“彻底杜绝”的关键不在沙箱开关，而在编译时类名唯一性 + 运行时路径正确性 + 主应用不重复提供全局样式。任何一环断裂，都会让隔离形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
