@import顺序决定变量和mixin是否可用，因less按导入顺序解析并合并作用域，后导入的同名定义会覆盖前者；若button.less在variables.less前导入，则其中引用的@primary-color将报undefined。
Less 的 @import 不是“写上去就完事”，顺序、参数、路径、作用域四者错一个，轻则样式不生效，重则编译失败或体积暴增。
为什么 @import 顺序决定变量和 mixin 是否可用
Less 按文件导入顺序逐个解析并合并作用域，后导入的同名变量/mixin 会覆盖前面的——但前提是它们被实际“看到”。常见翻车点：
-
@import "button.less";放在@import "variables.less";前面 →button.less里用的@primary-color报variable is undefined - 组件文件（如
card.less）里写了.card { color: @text-color; }，但@text-color在themes/dark.less里定义，而dark.less又在card.less之后导入 → 颜色永远是默认值 - 所有全局变量、基础 mixin、重置规则必须放在主入口（如
index.less）最顶部，组件样式放最后
@import (css) 和 @import (less) 别混用
后缀为 .css 的文件，默认行为取决于 Less 版本和构建工具，不可靠。必须显式声明意图：
- 要原样输出
@import url("reset.css");到最终 CSS？用@import (css) "reset.css"; - 要让
normalize.css里的嵌套@media被 Less 解析？用@import (less) "normalize.css";（注意：它会尝试解析其中的@variable，出错概率高） -
@import "reset.css";（无参数）在 Webpack +less-loader中可能被当成 CSS 输出，也可能报错，行为不一致 - 如果 CSS 文件内部含
@import url("xxx.css")，Less 不会递归加载——得手动拆出来，在 Less 里逐条写@import (css) "xxx.css";
如何避免 @import 引入冗余 CSS
默认 @import "button.less"; 是全量内联：哪怕你只调用了 .btn-primary，整个 button.less 的所有选择器都会进最终 CSS。
- 想只复用变量和 mixin，不输出任何样式？用
@import (reference) "button.less"; - 但
(reference)不等于“按需”：如果你在.card()里调用了.btn-base()，而.card()被用了，那.btn-base()就一定会输出——(reference)挡不住链式调用 - 真正控制体积，得配合命名空间（如
.u-btn-size()）和显式调用，不能依赖“没写就不编译” - 别在
index.less里@import "pages/home.less"，页面级样式应由构建工具按需加载，否则首屏 CSS 瞬间膨胀
路径别名和相对路径哪个更稳
Less 本身不认 Webpack 的 ~ 或 @/，硬写容易在 CLI 编译或不同 loader 下失效。
- 相对路径（如
@import "../mixins/grid.less";）看似直观，但文件一挪动就报File not found - 推荐统一用根路径别名，配合构建工具配置：
less-loader的paths选项指向src/styles，再写@import "mixins/grid.less"; -
@import "~styles/mixins/grid.less";是less-loader扩展语法，原生lessc不支持，CI 环境若用 CLI 编译会直接失败 - 绝对路径（
@import "/src/styles/vars.less";）也不可靠，不同系统路径分隔符、运行目录差异都可能破坏解析
最容易被忽略的一点：Less 的 @import 没有模块作用域，(reference) 只管“是否输出”，不管“输出到哪”。一个没加命名空间的 .size() mixin，一旦被调用，生成的 CSS 就可能污染全局 button 或 input 标签——这不是路径或参数能解决的，得靠设计约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
