Less中@import顺序直接影响样式生效，因其实质是按序解析、合并作用域并覆盖变量与规则；后导入文件可覆盖先导入的同名变量、混合及选择器，前提是未使用(reference)或(inline)修饰。
Less中@import顺序为什么直接影响样式生效？
因为Less的@import不是简单拼接文件，而是按顺序解析、合并作用域、覆盖变量和规则。后导入的文件能覆盖先导入的同名变量、混合（.mixin）甚至选择器，但前提是它们在同一个编译上下文中——比如没加(reference)或(inline)修饰。
- 如果
@import "vars.less";放在@import "button.less";后面，而button.less里用了@primary-color，那它用的是vars.less里定义的值；反过来就可能报variable @primary-color is undefined -
@import (less) "reset.css";会把CSS当Less处理（允许其中写@media嵌套），而@import (css) "reset.css";则原样输出——类型错配会导致意料外的编译结果 - 用
@import (reference) "mixins.less";时，里面的.btn()不会被输出，只供其他文件调用；但一旦某处忘了加(reference)，整个mixins内容就重复输出一遍
哪些文件该放进index.less主入口？
主入口只放“指挥层”逻辑：全局变量、基础重置、核心混合、主题开关，不放具体组件样式。否则每次改一个按钮颜色都要重新编译全部组件，热更新慢，diff也难读。
- 推荐结构：
@import "config/variables.less";→@import "config/mixins.less";→@import "base/reset.less";→@import "themes/dark.less";（条件引入）→ 最后才是@import "components/button.less"; - 避免在
index.less里直接@import "pages/home.less";——页面级样式应由构建工具按需加载，不然首屏CSS体积暴增 - 路径别用相对上级：
@import "../mixins/grid.less";容易因文件挪动失效；统一用根路径别名（如@import "~styles/mixins/grid.less";），配合Less插件或Webpack的paths配置
用@import (multiple)解决循环依赖靠谱吗？
不靠谱。它只是让同一文件被多次@import时不报错，但不会解耦逻辑依赖。真有循环（A用B的变量，B又用A的混合），编译时仍可能取到未定义值，尤其变量提升不跨文件。
- 典型现象：
Cannot access property 'size' of undefined，其实是typography.less引用了spacing.less里的@space-md，而spacing.less又反向@import了typography.less来算行高 - 正确做法：拆出第三份文件，比如
core/tokens.less，只放原子级变量（@space-xs,@font-size-sm），让spacing.less和typography.less都只依赖它 -
(multiple)唯一合理场景是：多个皮肤文件（light.less/dark.less）都@import "shared/icons.less"，且图标本身无变量依赖
VS Code里怎么一眼看出@import链是否健康？
靠文件树+语法高亮不够，得看实际解析顺序。Less官方插件不显示依赖图，但可以用lessc --verbose命令导出编译日志，或者在Webpack中加less-loader的sourceMap: true，再配合浏览器开发者工具的Sources面板逐层点开。
- 检查关键信号：变量定义位置是否早于使用位置（在Sources里展开
index.css对应源码，Ctrl+Click跳转，看能否准确定位到variables.less第3行） - 常见陷阱：
@import "utils/helpers.less";里写了@import "config/breakpoints.less";，但主入口也单独@import "config/breakpoints.less";——这不算错误，但会让断点定义出现两次，后期维护者容易改漏一处 - 小技巧：在
variables.less末尾加一行// @imported at: index.less line 5，手动标记来源，比纯靠IDE推断更可靠
事情说清了就结束。最麻烦的从来不是语法对不对，而是团队里有人悄悄在mixins.less里改了@border-radius-base，却没通知其他人这个变量已被card.less和input.less同时继承——这种隐式耦合，@import结构再漂亮也救不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
