Less导入顺序决定样式覆盖优先级，后导入的规则通过CSS层叠覆盖先导入的同名选择器；应按变量/混合→通用样式→组件样式→主题覆盖的顺序导入，并统一使用绝对路径别名，禁用嵌套相对路径，避免滥用!important。
Less导入顺序决定样式覆盖优先级
Less里没有“模块依赖图”，只有CSS层叠顺序。@import 的位置直接变成最终CSS的声明顺序，后导入的规则能覆盖先导入的同名选择器——这不是“重载”，是原生层叠行为。
常见错误现象：.btn { color: red; } 在 base.less 里定义，但业务组件里改颜色没生效，结果发现 components/button.less 被提前导入了，压根没走到主题覆盖层。
- 把基础变量、mixin、重置样式放在最开头的
variables.less和mixins.less - 全局通用样式（如
typography、layout）紧随其后 - 组件样式按功能分组导入，但必须在主题/皮肤文件之前
- 主题色、断点覆盖、夜间模式等“覆盖层”放到最后，确保能生效
避免嵌套 @import 导致路径混乱和构建失败
Less不支持相对路径的“向上回溯”逻辑，@import "../theme/dark.less" 在被其他文件导入时，路径解析基准是**当前文件所在目录**，不是入口文件。一旦嵌套层级变深，Cannot find module 错误就频繁出现。
使用场景：团队多人协作开发，有人在 pages/home.less 里直接 @import "../../mixins/border-radius.less"，另一个人在 components/card.less 里复用同一行，结果一个通一个挂。
立即学习“前端免费学习笔记（深入）”；
- 所有
@import都用绝对路径别名，比如@import "mixins/border-radius"; - 配置 Less 编译器的
paths（Webpack 的less-loader用paths，Vite 用lessOptions.paths）指向src/styles - 禁止在非入口文件里写带
../的路径；入口index.less是唯一可接受相对路径的地方
!important 不是解药，它会破坏主题切换能力
当多个模块都靠 !important 强行覆盖样式，主题切换（比如从 light 切到 dark）就会失效——因为暗色主题的规则也被 !important 锁死了，无法被后续更具体的规则替代。
性能影响：浏览器需要额外计算层叠权重，尤其在动态插入样式时，触发强制重排的概率上升。
- 把高频覆盖项抽成变量，比如
@primary-color，让主题文件统一赋值 - 用嵌套提升特异性，比如
.theme-dark .btn比.btn优先级高，无需!important - 仅在第三方UI库样式入侵严重时临时加
!important，且必须加注释说明“临时 hack，待封装隔离”
大型项目必须拆出 utils.less 和 overrides.less 两个独立层
很多人把工具函数（lighten()、contrast()）、布局辅助类（.clearfix、.sr-only）和第三方库覆盖混在一起，结果每次升级 Ant Design 或 Element Plus，都要手动翻几十个文件找 .el-button 相关样式。
兼容性影响：某些旧版 Less（extend 嵌套在 media query 内，如果 overrides.less 里写了这类结构，构建会静默失败。
-
utils.less只放纯函数、无副作用的 mixin 和 class 工具，不包含任何业务语义 -
overrides.less专用于第三方库样式打补丁，每个 patch 加块注释标明目标库版本，例如// Ant Design v5.12.3: fix badge z-index - 这两个文件必须由架构组维护，禁止业务模块直接修改
真正难的不是怎么写 Less，是怎么让不同人写的模块在同一个编译上下文里不互相咬死。路径、顺序、作用域——这三个点卡住一个，整个样式体系就容易返工。
