Less本身不提供样式隔离，仅编译生成带前缀的选择器；真正隔离需HTML容器class存在且唯一、CSS Modules启用哈希类名、第三方库配置namespace或重编译三者协同。
Less本身不提供样式隔离，它只负责编译时生成带前缀的选择器
很多人以为写个 .micro-app { .button { } } 就能隔离样式——其实这只是“看起来隔离”。Less 编译后确实会产出 .micro-app .button，但这个规则是否生效，完全取决于 DOM 中是否存在 class="micro-app" 的容器节点。如果子应用挂载点是 <div id="subapp"></div>，那这条 CSS 根本不会匹配任何元素。
更关键的是：第三方 UI 库（如 Ant Design、Element Plus）注入的 .ant-btn、.el-input 类名，压根不经过你的 Less 文件，它们直接写进 document.head，Less 对它们毫无约束力。
- Less 是构建阶段工具，运行时零干预；样式隔离必须靠 HTML 容器 + 构建配置 + 运行时策略三者协同
- 所有动态插入的 DOM（比如
Modal、Tooltip使用createPortal挂到body）都会脱离容器，导致样式失效 -
@import "antd.less"若没加(reference)，变量和 mixin 会被重复编译进每个子应用，颜色值互相覆盖
必须用 .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)会失效
漏掉任一条件，你写的 styles.button 在 JS 里就拿不到哈希后的类名，最终还是拼出 className="button" 直接上全局。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
第三方组件类名不能靠 Less 嵌套“罩住”，得用 namespace 配置或重编译
像 .el-date-picker、.ant-table 这种类名，不是你写个 .subapp { .ant-table { } } 就能控制的。它们来自 UI 库的独立 CSS 文件，加载时机、选择器权重、注入位置都不受 Less 管控。
- Element Plus 必须初始化时传入
{ namespace: 'ep' }，并同步改 SCSS 变量$namespace: 'ep'，否则类名仍是全局.el-input - Bootstrap 要重编译源码：
.bootstrap-iso { @import "bootstrap/scss/bootstrap"; }，否则加class="bootstrap-iso"到body完全无效 - Ant Design 的
ConfigProvider可设prefixCls，但 JS 组件（如DatePicker）仍可能绕过，需配合getPopupContainer指定挂载点为子应用容器内
最容易被忽略的隔离前提：HTML 容器 class 必须存在且唯一
所有 Less 嵌套、CSS Modules、postcss-prefix-selector 的效果，都依赖一个事实：子应用根节点有且仅有 class="myapp"（不能是 id，不能是属性选择器，不能是多个 class 并列）。这个 class 不是可选的“建议”，而是隔离链上最脆弱也最关键的一环。
qiankun 子应用注册时指定的 container 选择器，必须确保对应 DOM 元素在挂载前已存在，并手动加上该 class。如果用 document.getElementById('subapp') 作为容器，却忘了 el.classList.add('myapp')，那前面所有 Less 工作等于白做。
动态创建的容器（比如主应用 runtime 创建 div）、服务端渲染未同步 class、或者用 data-app="myapp" 这种非 class 属性，都会让整个隔离机制失效——因为浏览器 CSS 引擎只认 class 选择器匹配。
