less的@import按入口文件为基准解析相对路径，仅匹配.less后缀，.css需加(less)参数；(reference)仅导入符号不输出css；别名路径需构建工具支持；变量覆盖须用!default且定制变量应置于@import前。
Less中@import的路径解析规则和常见失败原因
Less的@import不是简单复制粘贴文件内容，它会按特定顺序解析路径，且默认不支持无扩展名或非.less后缀的文件自动补全。很多报错如 File not found: ./mixins 或 Cannot resolve import 都源于此。
实际使用时需注意：
- 如果导入的是
.css文件（如@import "reset.css"），Less默认会原样输出@import语句到编译后CSS中，不会解析其内容；加(less)参数才能强制作为Less处理：@import (less) "reset.css" - 省略扩展名时（如
@import "variables"），Less只尝试匹配variables.less，不会试variables.css或variables.scss - 相对路径以「当前被编译的入口文件」为基准，不是
@import所在文件——这点容易误判，尤其在多层嵌套引入时
@import (reference) 的真实用途和典型误用场景
@import (reference) 不是“只导入不输出”，而是“仅用于变量、Mixin、函数等符号定义，不输出任何CSS规则”。它常被误当作“条件导入”或“性能优化开关”，其实它解决的是命名冲突和样式污染问题。
典型适用情况：
- 共享
.less中只含@color-primary: #007bff;和.btn() { ... }，但你不希望它生成对应CSS类——用@import (reference) "shared" - 多个模块都依赖同一套断点变量，又不想让
@import "breakpoints"在每个文件里都输出一遍媒体查询——此时(reference)能避免重复CSS - 错误用法：对含实际样式的文件（如
layout.less）加(reference)，结果发现布局样式完全没生效，因为它的规则被静默丢弃了
如何让@import支持别名路径（如~components/button）
Less本身不支持Webpack式的~别名，但可通过构建工具注入路径映射。例如用less-loader时，在Webpack配置中设置paths：
options: {
paths: [path.resolve(__dirname, 'src/styles'), path.resolve(__dirname, 'src/components')]
}
之后就能写@import "button/index";，Less会依次在src/styles/button/index.less和src/components/button/index.less中查找。注意：~前缀是less-loader的扩展语法，原生Less CLI不识别，直接运行lessc会报错。
另一个轻量方案：用@import "../node_modules/bootstrap/less/alerts.less";，但路径硬编码难维护，适合临时调试。
多个@import的执行顺序与变量覆盖陷阱
Less中@import是同步、顺序执行的，后面的文件可以访问前面导入的变量和Mixin，但反过来不行。这导致一个关键陷阱：变量一旦被赋值，后续同名@import无法覆盖——除非用!default。
比如：
@primary-color: #007bff;<br>@import "theme-dark"; /* 里面写了 @primary-color: #333 !default; */
此时@primary-color仍是#007bff，因为!default只在变量未定义时生效。真正安全的覆盖方式是把定制变量放在所有@import之前，或用函数封装逻辑分支。
更隐蔽的问题：如果两个@import都定义了同名Mixin，后导入的会完全覆盖前者，且无警告。建议用命名空间隔离：.ui-button.mixin() { ... }。
