--color-primary在微前端中是定时炸弹：因css变量依赖继承链与就近生效，子应用在body设该变量会导致主应用所有引用处瞬间变色且devtools无法溯源；必须强制使用--{app-id}-{semantic-name}格式（如--mf-order-header-bg），前缀须动态获取、禁止写死，并由构建工具校验兜底。
为什么 --color-primary 这种写法在微前端里等于埋雷
CSS 自定义属性（--*）不走选择器权重，只靠继承链 + 就近生效。子应用在 body 上写 style="--color-primary: red"，主应用所有用到 var(--color-primary) 的组件瞬间变色，DevTools 里只显示最终值，根本看不出是哪个子应用注入的。这不是加载顺序问题，而是作用域失控。
必须强制加 app-id 前缀，且不能嵌套语义
正确格式是 --{app-id}-{semantic-name}，比如：--mf-order-header-bg、--mf-user-profile-text-color。禁止写成 --mf-order-form-input--error-border —— 多余层级应由 BEM 类名控制，不是靠变量名堆叠。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 前缀来源必须动态：从 qiankun 注册配置的
name字段读取，或通过window.__MICRO_APP_NAME__注入，避免写死路径导致部署变更后失效 - 禁止 JS 内联写
style="--color-primary"：统一走document.documentElement.style.setProperty()动态注入，便于集中拦截和校验 - 建议接入构建时校验插件：比如自定义 ESLint 规则，拦截漏加前缀的
--*使用
主应用统一管理基础 CSS 变量，子应用禁用全局注入
多个子应用各自定义 --font-size-base 或 --z-index-modal，结果就是 z-index 错乱、字体忽大忽小。主应用应打包并注入一套基础变量（如 normalize 相关、主题色、层级常量），子应用只允许覆盖局部业务变量，且必须带前缀。
- 主应用提供
:root { --mf-core-font-size: 14px; --mf-core-z-index-drawer: 1000; } - 子应用移除所有
:root { --color-primary: ... }全局声明 - 若需定制主题，改用 scoped 方式：比如在子应用根容器上设
data-app="order-mgmt"，再写[data-app="order-mgmt"] { --mf-order-primary: #1890ff; }
CSS Modules 和构建工具兜底比人工约定更可靠
靠文档和 Code Review 防不住多人协作和历史代码。必须让构建工具强制隔离：
- Webpack：启用
css-loader的modules: true，配合localIdentName统一模板（如[path][name]__[local]___[hash:base64:5]），确保相同源文件生成一致哈希 - Vite：开启
css.modules并配置generateScopedName，同时在css.preprocessorOptions.scss.additionalData中注入全局变量前缀声明 - 对非模块化 CSS（如第三方库样式）：用
postcss-prefix-selector插件为整个文件加[data-app="xxx"]属性前缀，防止污染
setProperty、写 :root、写 @custom-media 时，条件反射地敲出 --mf-xxx-。一旦漏掉一个，就可能引发跨应用的 UI 崩溃，而且极难定位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
