SCSS编译后仍是全局CSS，BEM无法阻止覆盖；必须动态注入app-id命名空间到构建链，禁用子应用直接import UI框架CSS，CSS变量和@import均需加app-id前缀。
SCSS 编译后仍是全局 CSS，BEM 写得再规范也挡不住覆盖
SCSS 只是预处理器，@import、mixin、class 最终都编译成标准 CSS 类名（如 .el-button、.card），浏览器不认“这是哪个子应用的 SCSS”，只看 class 是否匹配 DOM。qiankun 的 strictStyleIsolation 不解析 @import 内容，也不改写选择器，所以子应用 A 的 @import "common/_reset.scss" 仍会重置主应用的 body margin。
必须动态注入 app-id 命名空间到 SCSS 构建链
不能靠 $namespace: 'order-mgmt' 这种 SCSS 变量硬编码——它在构建时固化，部署路径或注册名一变就脱钩。正确做法是从运行时环境读取唯一标识：
- Vue 项目：在
setup()中读取window.__MICRO_APP_NAME__，生成类名如${appName}__form-submit - React 项目：封装
useAppName()Hook，避免组件内硬编码 - Vite 子应用：在
vite.config.ts的css.preprocessorOptions.scss.additionalData中注入动态变量，例如：@use "src/styles/vars" with ($app-id: "#{window.__MICRO_APP_NAME__ || 'unknown'}"); - 构建后检查 dist 目录下 CSS 文件，确认无裸露的
.btn、.header等泛化类名
禁用子应用直接 import UI 框架 CSS 是硬性前提
子应用里写 import 'element-plus/dist/index.css' 或 是高危操作。qiankun 不去重，多个子应用引入同一份 CSS，DOM 中出现多份 标签，加载顺序决定谁赢。
- 所有 UI 框架样式必须由主应用统一提供（如预加载命名空间版 Element Plus）
- 子应用只
import组件 JS 行为，不 import 任何 CSS 文件 - 若需局部样式，改用
（Vue）或 CSS Modules（React +clsx） - Element Plus 必须同步配置两处：
app.use(ElementPlus, { namespace: 'ep' })+ SCSS 源头重写$namespace变量，否则构建产物仍是.el-button
CSS 变量和 @import 都必须加 app-id 前缀
--color-primary 这类裸变量是定时炸弹：它不走选择器权重，而是就近继承生效。子应用设 document.body.style.setProperty('--color-primary', 'red')，主应用所有用该变量的组件瞬间变色，DevTools 里根本看不出源头。
- CSS 自定义属性必须强制格式：
--{app-id}-{semantic-name}，例如--mf-order-header-bg - 禁止
--mf-order-form-input--error-border这类嵌套语义，层级应由 BEM 类名控制 - 禁用 JS 内联写
style="--color-primary"，统一走document.documentElement.style.setProperty() -
@import规则必须被 postcss-prefix-selector 或类似插件处理，否则它完全绕过 qiankun 沙箱
真正难的不是加前缀，而是让整个构建链（SCSS 编译 → CSS 输出 → 变量注入 → @import 解析）全部感知运行时 app-id。漏掉任意一环，比如只配了 Element Plus 的 JS namespace 却没改 SCSS 变量，或者用了 additionalData 却忘了校验构建产物，样式冲突就会在某个深夜发布后突然爆发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
