Scoped CSS在旧版微前端中失效，因DOM挂载不接管样式生命周期，data-v-xxx属性未随节点迁移，且选择器仍全局生效；CSS Modules通过哈希类名+JS显式绑定解决此问题，但需手动管理style标签生命周期与全局资源兼容。
为什么 scoped 在旧版微前端里会失效
因为旧版微前端（如 single-spa + 手动 DOM 挂载）不接管样式生命周期，vue-style-loader 或 vue-loader 注入的 data-v-xxx 属性只作用于当前 Vue 实例挂载的 DOM 节点，而子应用可能被插入到主应用已存在的容器中，导致属性丢失或未匹配；更关键的是，CSS 选择器仍全局生效，[data-v-xxx] 若未随 DOM 一起迁移，隔离就形同虚设。
- 主应用和子应用同时使用
scoped，但子应用挂载后 DOM 节点上没有对应data-v-xxx属性 - 子应用 CSS 被打包进主应用样式表，
scoped的哈希属性无法匹配动态插入的节点 -
shadow DOM未启用，纯靠属性选择器的隔离在跨框架挂载时不可靠
用 CSS Modules 替代 scoped 的实操要点
CSS Modules 把类名编译成唯一哈希（如 button__red_1x2a3），通过 JS 显式绑定 class，绕过属性选择器依赖，更适合运行时动态挂载场景。
- Webpack 配置中需启用
modules: { mode: 'local' }，并确保css-loader版本 ≥ 6.0（旧版localIdentName写法已弃用） - Vue 单文件组件中不能混用
<style scoped></style>和<style module></style>，必须改用<style module></style>并在<script></script>中用import styles from './xxx.module.css' - React 项目直接用
import styles from './Button.module.css'，JSX 中写className={styles.redButton}—— 这步不可省，否则类名不会注入 - 避免在 JS 中拼接 class 字符串（如
className={'base ' + styles.red}），应统一用clsx或模板字符串确保哈希名不被破坏
如何让 CSS Modules 在子应用卸载后真正“卸载”
默认情况下，CSS Modules 生成的 <style></style> 标签不会随子应用卸载而移除，造成样式残留。必须手动管理 style 标签生命周期。
- 在子应用
unmount钩子中，查找并移除所有含特定标识的<style></style>标签，例如：用document.querySelectorAll('style[data-app-id="sub-app-a"]') - Webpack 构建时给
style-loader加attributes: { 'data-app-id': 'sub-app-a' }，便于后续定位 - 若用
mini-css-extract-plugin，则无法动态卸载 —— 必须切回style-loader，否则 CSS Modules 失去运行时控制力 - 注意：Vite 默认用
esbuild处理 CSS，需显式配置css.modules.generateScopedName并禁用 HMR 的 style 缓存（server.hmr.overlay = false）以防热更新后类名不一致
与主应用共存时最易忽略的兼容细节
主应用可能用了 CSS-in-JS（如 Emotion）、PostCSS 插件（如 autoprefixer）、或自定义字体/变量，这些不会自动继承到 CSS Modules 作用域内。
- CSS Modules 不支持
@import全局变量，需改用:export导出，再在 JS 中读取（import vars from './vars.module.css'; console.log(vars.primaryColor)） - 字体图标（如 iconfont）的
@font-face必须放在主应用全局样式中，子应用 CSS Modules 里引用font-family才能生效 - 媒体查询、伪类、动画名（
@keyframes）仍属全局，CSS Modules 只作用于类名；动画名冲突时需手动加前缀，或改用 JS 控制动画（如useEffect + requestAnimationFrame） - 如果主应用用了
CSS Custom Properties，子应用可通过:root { --primary: #xxx }声明，但不能在.module.css里用var(--primary)直接访问 —— 必须确保该变量已在全局 scope 定义
CSS Modules 真正起效的前提，是彻底放弃对“自动注入+自动清理”的幻想，把样式当作资源来手动加载、绑定、卸载。任何一步漏掉（比如忘了删 <style></style> 标签，或 JS 里没用 styles.xxx），都会让隔离失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
