less嵌套样式需html容器class（如.micro-app）才能生效，否则失效；真正隔离须用.module.less+css-loader modules生成哈希类名；@import(reference)防重复注入；styledisolation仅控制style插入位置，不改选择器。
Less嵌套本身不隔离样式，必须配合HTML容器class
写 .micro-app { .button { } } 编译后确实生成 .micro-app .button，但这条规则只在 DOM 中存在 class="micro-app" 的父容器时才生效。如果子应用挂载点是 <div id="subapp"></div>，那所有嵌套样式全失效。
常见错误现象：
- 主应用用
normalize.css，子应用带reset.css，两个都进，层叠顺序不可控 - 子应用通过
createPortal把 Modal 挂到document.body，脱离容器后样式瞬间丢失 - 第三方 UI 库（如 Ant Design）注入的
.ant-btn类名压根不经过你的 Less 文件，完全绕过嵌套
必须用 .module.less 后缀 + css-loader modules 模式
真正可控的类名隔离方式是让 button 变成 Button_button__abc123 这类哈希名，但这需要两个硬性条件同时满足：
- 文件名必须是
xxx.module.less（不是xxx.less），否则css-loader默认不启用 modules 模式 -
webpack配置中css-loader的modules.auto必须设为true或显式匹配/\.module\.(less|css)$/ - Vite 用户需在
css.preprocessorOptions.less.additionalData中注入全局变量，否则@import (reference)会失效
漏掉任一条件，你在 JS 里写的 styles.button 就拿不到哈希后的类名，最终还是拼出 className="button" 直接上全局。
@import (reference) 是防第三方样式重复注入的关键
直接 @import "antd.less" 会导致变量和 mixin 被重复编译进每个子应用，颜色值互相覆盖。必须加 (reference)：
@import (reference) "antd.less";
这样只引入变量和 mixin 定义，不输出 CSS 规则。但要注意：
-
(reference)必须出现在.module.less文件中，否则无效 - 若需保留第三方类名（如
.ant-btn），得显式写:global(.ant-btn)，否则会被哈希化导致图标/组件样式丢失 - 所有动态拼接的
className（比如className={`btn ${type}`}）必须走styles[type]映射，否则type字符串会作为全局 class 注入
qiankun 的 styledIsolation 不改写选择器，只控制挂载位置
styledIsolation: true 只把子应用的 <style></style> 插入其容器的 shadowRoot（如果存在），否则仍扔进全局 ；strictStyleIsolation: true 强制创建 shadowRoot 并整应用塞进去，但所有 document.querySelector 在子应用内必须操作 shadowRoot，否则查不到元素。
它不管以下情况：
-
@import嵌套的 CSS <link rel="stylesheet">- CSS-in-JS 动态生成的
<style></style>标签 - 第三方库往
document.head直接append的样式
真正起效要靠三者协同：HTML 容器有且仅有 class="myapp"、所有动态 DOM 挂载点都在该容器内、构建时禁用 !important 并统一用层级压制（如 .myapp .ant-btn > .ant-btn）。最容易被跳过的，就是那个看似简单的 class="myapp"——它不在 DOM 上，Less 再规范也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
