Less的@import在编译期被提升至文件顶部并按导入顺序展开，决定最终CSS层叠顺序；变量和mixin跨文件不提升，声明顺序依赖导入顺序；动态路径、循环依赖和嵌套import易导致顺序异常与错误。
Less的@import不是按书写顺序拼接，而是编译期提升合并
你写的@import "mixins.less";在.card块下面，但最终CSS里.border()生成的规则却出现在.shadow()上面——这不是bug，是Less编译机制决定的。所有@import语句会在解析阶段被“提到文件最顶上”，然后按提升后的顺序依次展开内容，再做变量替换、mixin展开和选择器输出。所以你在index.less里写的导入顺序，才是最终CSS层叠顺序的唯一依据。
- 嵌套
@import（比如a.less里@import "b.less";）会打乱主文件的显式顺序，b的内容实际插入位置取决于a被导入的时机，而非它自身在a里的位置 - 用
@import (reference)或@import (inline)修饰时，不会参与样式输出，但变量/mixin仍可被引用——这种“只导入不输出”的行为容易让人误判依赖关系 -
@import (less) "reset.css";会把纯CSS当Less处理（允许嵌套@media），而@import (css) "reset.css";则原样透出；类型错配会导致规则被跳过或语法报错Unrecognised input
变量和Mixin的声明位置比@import顺序更关键
Less里变量和Mixin不是“定义即生效”，而是“首次声明才生效”。如果variables.less在button.less之后导入，而button.less里用了@primary-color，就会报variable @primary-color is undefined——哪怕两个文件物理路径相邻、内容也确实存在。
- 变量提升（hoisting）只发生在单个文件内，跨文件不生效；不能指望
theme.less里重定义@primary-color自动覆盖variables.less里的初值，除非它被后导入 - Mixin调用不触发前置声明检查：你可以在
.btn { .flex-center(); }里调用一个尚未定义的.flex-center()，只要它在当前编译上下文中某处被定义过（哪怕在后面文件里），就不会报错——但这会让调试变得困难 - 避免循环依赖：比如
spacing.less引用typography.less里的@line-height-base，而后者又反向@import前者来算@space-lg，编译时可能取到undefined，错误信息类似Cannot access property 'size' of undefined
Webpack中less-loader的paths配置不影响导入顺序
less-loader的paths选项只解决路径解析问题（比如把@import "~styles/vars"映射到src/styles/vars.less），它完全不干预@import语句的执行顺序。真正控制CSS输出顺序的，只有入口文件（如index.less）中@import语句出现的先后。
- 别依赖文件名排序（如
_01-base.less、_02-layout.less）——Less不识别这种命名约定，lessc也不会按字母序自动导入 - Webpack里若用
MiniCssExtractPlugin拆分CSS chunk，不同chunk的加载时机可能错乱：页面已加载的全局CSS（比如CDN引入的antd.css）可能比某个异步加载的page-home.css更早生效，导致覆盖失效 - 用
postcss-import替代Less原生@import能自动拓扑排序、检测循环引用，但它和Less变量/mixin不互通——适合纯CSS依赖管理，不适合需要复用@primary-color的场景
调试时发现CSS顺序异常，优先检查@import是否被动态路径干扰
Less不支持运行时路径拼接，像@import "@{theme}/components.less";这种写法在老版本会直接报错Unrecognised input，新版本虽能编译，但HMR（热模块替换）会失效——因为路径无法静态分析，文件变动时无法触发正确依赖更新。
- 动态路径导致构建工具无法建立准确的依赖图，
webpack --watch可能漏掉被@import的文件变更，改了dark.less却没刷新样式 - 路径歧义常见于相对路径：
@import "../mixins/grid.less";在components/card.less里可用，挪到pages/home.less就404；统一用根路径别名（如@import "~styles/mixins/grid.less";）并配好Webpack的resolve.alias更可靠 - 禁用
javascriptEnabled: true（除非真要执行JS逻辑），它会让Less引擎开启危险模式，可能绕过正常作用域规则，加剧顺序不可控
最易被忽略的点是：你以为在改button.less，其实variables.less里一个未注释的@import悄悄引入了另一份重置样式，它被提升到了顶部，把你的按钮边框盖掉了。查顺序，先看入口文件头部的@import链，而不是编辑器里当前打开的文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
