Less本身不提供运行时样式隔离，需配合HTML容器class、构建工具模块配置（如css-loader modules）及DOM挂载约束三者协同才能生效；仅靠嵌套命名空间无效。
Less 本身不提供沙箱能力，它只是构建链路上的预处理器；靠嵌套写 .myapp { .btn {} } 不等于隔离，漏掉 HTML 容器 class 或第三方组件挂载到 document.body 就直接失效。
为什么 .app-a { .btn {} } 写了也白写
这个写法只在满足三个条件时才起效：HTML 根容器有且仅有 class="app-a"；所有子应用 DOM（包括 ReactDOM.createPortal 弹窗）都挂载在这个容器内；构建工具（如 Webpack 的 css-loader）没跳过该文件或误判为非模块。常见失效点：
- 子应用用了
ant-modal，默认挂载到document.body，脱离.app-a容器，样式规则完全不匹配 - Less 文件没以
.module.less结尾，css-loader按普通 CSS 处理，不启用modules模式，嵌套被忽略 - 主应用已加载
normalize.css，子应用的button { margin: 0 }仍被覆盖——命名空间不干预已有全局规则 -
@import "antd.less"没加(reference)，导致变量重复注入，颜色值被后加载的覆盖
必须配合构建配置才能让 Less 参与隔离
Less 要真正起作用，得被构建工具识别为模块化资源，并参与类名重写或前缀注入。关键配置项：
- Webpack 中
css-loader的modules.auto必须设为true，或显式匹配/\.module\.(less|css)$/ - 所有 Less 文件命名强制为
xxx.module.less，否则modules模式不触发 - 动态拼接的
className（如className={`btn ${type}`}）必须走styles[type]映射，否则type字符串会作为全局 class 注入 - 需用
:global(.ant-btn)显式保留第三方类名，但该语句必须写在.module.less文件中，否则哈希化后图标/样式丢失
Less 隔离失效的典型逃逸路径
即使 Less 编译出带前缀的 CSS，以下行为仍会导致样式泄漏：
- 子应用 JS 中执行
document.head.appendChild(styleEl)—— 动态插入的不经 Less 构建流程，也不受命名空间约束 - 使用
styled-components或emotion，其生成的样式直接写入document.styleSheets，绕过所有构建时处理 -
@font-face、@keyframes、CSS 变量（--primary-color）全局注册，加前缀无效 -
style="color: red"这类内联样式，Less 和任何编译时方案都管不了
真正起效的隔离从来不是单靠 Less 嵌套，而是「HTML 容器 class + 构建时模块约束 + 运行时 DOM 挂载限制」三者咬死。最容易被跳过的那个 class="app-a"，不在 DOM 上，Less 再规范也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
