CSS变量在微前端中必然冲突，因其全局作用域特性导致后加载子应用覆盖先加载的同名变量，必须通过手动加前缀（如--bs-primary-iso）并统一重定义、引用和运行时动态设置来隔离。
为什么 --bs-primary 这类 CSS 变量在微前端里必然冲突
因为 CSS Custom Properties（--bs-primary、--color-text）天生就是全局作用域，不参与选择器匹配，也不受 .bootstrap-iso 或 shadowRoot 影响。多个子应用同时定义 --bs-primary，后加载的那个会直接覆盖前一个——控制台查不到报错，但主题色已经悄悄变了。
不能靠命名空间自动隔离，必须手动重定义作用域
给变量加前缀不是可选项，是必须动作。比如 Bootstrap v5 的默认变量 --bs-primary，在子应用中应统一改写为 --bs-primary-iso 或 --subapp-order-primary：
- 在重编译的
bootstrap-iso.scss中，显式重声明变量：.bootstrap-iso { --bs-primary-iso: #0d6efd; --bs-secondary-iso: #6c757d; color: var(--bs-primary-iso); } - 所有用到该变量的样式，必须显式引用新名：
color: var(--bs-primary-iso)，而不是沿用var(--bs-primary) - 如果子应用用了
:root定义变量，需改为限定在命名空间内：.bootstrap-iso :root或html.bootstrap-iso，否则仍会污染全局
运行时动态注入变量比构建时更可靠
构建时重写变量容易漏掉第三方组件或 runtime 注入的样式。更稳妥的做法是在子应用挂载时，用 JS 主动设置 scoped 变量：
- 在子应用
mount钩子中执行：document.documentElement.style.setProperty('--subapp-order-primary', '#1d4ed8'); - 避免使用
document.body或document.head，它们可能被其他子应用复用；优先用document.documentElement或容器元素el.style - 卸载时记得清理：
document.documentElement.style.removeProperty('--subapp-order-primary') - 注意：CSS 变量继承机制仍存在，若主应用在
:root设了同名变量，且未被子应用覆盖，则子组件仍可能读到主应用的值
Arco、Element Plus 等 UI 库的变量隔离要配对处理
像 @arco-design/web-vue 提供了 @arco-vars-prefix 配置项，但仅设这个还不够：
立即学习“前端免费学习笔记（深入）”；
- SCSS 中必须显式启用：
@import "@arco-design/web-vue/es/index.less" with ($arco-vars-prefix: 'finance-arco-vars'); - JS 初始化时传的
componentPrefix和变量前缀要一致，否则类名是finance-arco-button，但变量仍是--color-primary - 检查最终生成的 CSS，确认所有
var(--xxx)引用都指向带前缀的变量名，而不是原始名称
