重复导入 variables.less 会导致样式错乱，因其被多次编译输出，引发选择器重复、权重异常；应使用 @import (reference) 在入口文件集中导入，组件中禁止嵌套导入。
为什么重复导入 variables.less 会导致样式错乱
Less 的 @import 默认是「文本拼接」，不是模块化加载。同一个 variables.less 被多个文件分别 @import，就会在编译后 CSS 中多次输出同一组变量定义——虽然变量本身不生成 CSS，但若它被用于生成类（比如 .bg-@color），或被混入反复调用，就可能造成选择器重复、权重异常甚至覆盖失效。
用 @import (reference) 隔离纯逻辑文件
只提供变量和混入、不输出任何 CSS 的文件（如 variables.less、mixins.less），必须用 @import (reference) 导入。它让 Less 知道：“这个文件只用来读，别把它编译进最终 CSS”。
- ✅ 正确写法：
@import (reference) "variables.less"; - ❌ 错误写法：
@import "variables.less";（会重复注入） - ⚠️ 注意：
(reference)不影响变量/混入的可用性，但所有.class { }规则都不会进入输出
入口文件统一导入，禁止组件内嵌套导入
所有基础依赖（变量、混入、工具类）只在主入口文件（如 index.less）顶部集中导入一次；业务组件（如 button.less、card.less）里严禁再 @import 这些基础文件。
- 否则 Webpack 的
less-loader可能报Recursive import，或导致热更新时变量未刷新 - 组件文件应只依赖入口已暴露的变量和混入，不自行拉依赖
- 如果某个组件确实需要额外工具，优先考虑抽成独立工具类并用
@import (reference)引入
警惕 @import (once) 的误导性
@import (once) 看似能防重复，但它只对「同一路径的相同文件」做去重，且行为不稳定：Webpack 构建中路径解析差异（相对路径 vs 别名路径）、less-loader 缓存策略都可能导致它失效。它不能替代 (reference) + 入口集中管理的组合。
立即学习“前端免费学习笔记（深入）”；
- 不推荐用于
variables.less或mixins.less - 仅适合极少数无法重构的遗留场景，且需配合绝对路径或规范别名
- 真正可靠的方案仍是：入口一次
@import (reference)，其余地方零导入
最易被忽略的一点：即使用了 (reference)，如果某个组件文件又通过普通 @import 拉了另一个也引用了 variables.less 的中间文件，依然会触发重复——依赖图必须从入口单向展开，不能有隐式分支。
