SCSS前缀隔离仅对本地样式生效，需确保挂载容器存在对应class、Element Plus等UI库的SCSS变量被正确覆盖、PostCSS插件处理全局CSS及动态DOM节点的样式兜底。
SCSS 前缀隔离只对本地样式生效，不碰第三方 CSS
直接在子应用里写 .subapp-order { .button { color: blue; } }，编译后确实会生成 .subapp-order .button，但这个规则能否起作用，完全取决于 DOM 中是否存在 class="subapp-order" 的挂载容器。如果子应用挂载点是 <div id="subapp"></div>，那这条 CSS 根本不会匹配任何元素。更关键的是：@import "element-plus/theme-chalk/index.scss" 或 import 'normalize.css' 这类全局引入，压根不经过你的 SCSS 文件，它们的类名（如 .el-button、button）不会被自动加前缀。
Element Plus 必须同步改 JS 渲染 + SCSS 变量，否则前缀失效
只在 app.use(ElementPlus, { namespace: 'ep' }) 里设命名空间，JS 层能渲染出 ep-button，但 SCSS 编译产物里仍是 .el-button —— 因为 theme-chalk 的变量文件没被覆盖。必须新建 src/styles/element-namespace.scss：
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ( $namespace: 'ep' ); @use 'element-plus/theme-chalk/src/var.scss';
然后在 Vite 配置中通过 css.preprocessorOptions.scss.additionalData 全局注入该文件，确保所有 SCSS 编译都读到这个 $namespace 值。漏掉这一步，你看到的 CSS 文件里依然满屏 .el- 开头的类名。
PostCSS 插件才是子应用 CSS 全局选择器加前缀的主力
Vite 子应用不支持 experimentalStyleIsolation，靠 SCSS 嵌套根本覆盖不了所有情况。真正兜底的是 postcss-prefix-selector 插件，它会在构建时扫描所有 CSS 规则，给每个选择器自动加上专属前缀（如 .ale-sub-app）。配置要点：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 必须排除
node_modules和重置类库路径，否则normalize.css也被加双层前缀，导致按钮 margin 归零等意外失效 - 插件需在子应用构建阶段启用，主应用配了没用
- 对
@import嵌套的 CSS，默认不递归处理，得手动配置include路径或改用@use+additionalData注入方式
动态插入的 DOM（如 Modal、Tooltip）天然逃逸前缀作用域
所有通过 createPortal 挂到 document.body 的组件（比如弹窗、提示框、下拉菜单），都会脱离你精心设置的容器 class，导致前缀规则完全不匹配。这类节点的样式只能靠两种方式补救：
- 强制让 UI 库使用容器内挂载：Element Plus 设置
teleported={false}，Ant Design 用getPopupContainer={() => document.getElementById('subapp-order')} - 在全局
:root或body下单独写带前缀的覆盖规则，例如.subapp-order .ep-modal { z-index: 2000; }
前缀隔离不是“写完就完事”的配置项，它依赖容器存在、构建工具介入、运行时挂载策略三者咬合。少一环，污染就从缝隙里漏出来。
