真正可控的样式隔离方式是“按需导入 + 容器前缀 + 变量覆写”三者严格配合：变量需在第三方 Less 前用 !default 声明，容器前缀须嵌套提升权重至 20，且动态挂载内容需手动加类或用 Shadow DOM/iframe。
不能靠 @import 或 @use 实现样式隔离，第三方 CSS 规则一旦引入就全局生效；真正可控的方式是“按需导入 + 容器前缀 + 变量覆写”，且三者必须严格配合顺序。
第三方 Less 文件必须在自定义变量之后导入
Less 变量首次声明即锁定，@primary-color: #1890ff; 在 Ant Design 的 default.less 里已赋值，你后写 @primary-color: #52c418; 就完全无效。这不是覆盖失败，而是编译机制直接丢弃。
- 正确顺序只能是：
@import "variables.less";→@import "~antd/lib/style/themes/default.less";→@import "~antd/dist/antd.less"; -
variables.less必须扁平、无嵌套、不带选择器，只做一件事：声明所有变量并统一加!default，例如@primary-color: #52c418 !default; - 禁止在组件级文件（如
button.less）里重定义变量——块级作用域的@color和全局主题变量不是同一个东西 - Webpack 的
modifyVars和文件导入别混用；若同时存在，modifyVars优先级更高，但 key 必须带@符号且完全一致（@text-color≠@TextColor）
容器类名前缀是唯一能压制第三方选择器权重的手段
光靠 .my-app .ant-btn 不够，Ant Design 的 .ant-btn-primary 权重是 20，你的前缀规则只有 10，照样被盖。必须用嵌套提升特异性，且 HTML 容器必须真实存在。
- 写法示例：
.my-app { & & { .ant-btn { color: #1890ff; } } }→ 编译为.my-app.my-app .ant-btn，权重升到 20，稳压大多数 UI 库默认规则 - 所有挂载到
body的弹窗、Tooltip 等组件，必须用 JS 手动给生成的 DOM 节点也加上my-app类，否则样式不生效 - 禁用
#root .ant-btn这类 ID 前缀——ID 不可复用，也不符合 BEM 或现代组件封装习惯 - 别依赖 Vue/React 的
<style scoped>或 CSS Modules 自动加后缀，它们和 Less 命名空间不兼容，需显式写:global(.ant-btn)或关闭模块化
按需导入比全量引入更关键，但必须确认第三方是否提供拆分源码
像 Bootstrap、Ant Design、Element Plus 都提供了可拆分的 Less 源码（scss/ 或 lib/style/ 目录），但 Tailwind、Windi 等原子化方案不适用此路径——它们不走 Less 编译链。
立即学习“前端免费学习笔记（深入）”；
- 优先导入最小粒度文件，例如只用按钮就只
@import "~antd/lib/button/style/index.less";，而非@import "~antd/dist/antd.less"; - 确认路径是否存在：Ant Design v5+ 的主题变量在
~antd/lib/style/themes/default.less，不是~antd/lib/themes/default.less，少一个style/就报错 - 避免
@import (reference)误用于样式文件——它只跳过输出，不改变选择器结构；若你本意是“只加载变量”，那没问题；若想“隐藏按钮样式”，它做不到 - CDN 引入的压缩 CSS（如
antd.min.css）无法被 Less 控制，变量覆写、前缀包裹全部失效，仅适用于纯静态轻量项目
最常被忽略的一点：第三方库的 JS 行为往往强依赖原始类名（比如 data-bs-toggle="modal" 对应 .btn.btn-primary），一旦你用前缀把 .btn 改成 .my-app .btn，JS 可能就找不到目标元素。所以前缀方案只适用于你完全掌控 DOM 结构的场景；对动态挂载内容，得用 Shadow DOM 或 iframe 才算真正隔离。
