Less编译后CSS缺少样式主因是@import未生效：(reference)模式不输出规则、(inline)不解析Less语法、(less)遇错静默丢弃，或路径/嵌套/循环依赖导致文件未加载。
Less编译后CSS缺少部分样式，大概率不是语法写错了，而是某些 @import 根本没被真正“展开”——它被跳过、被覆盖，或者压根没进编译作用域。
为什么@import写了却没生成对应CSS
Less 的 @import 不是运行时加载，而是编译期文本拼接。如果一个文件用 @import (reference) 引入，它里面的 CSS 规则就不会输出，只保留变量和 mixin；但如果你误以为它会输出样式，就会发现“明明写了却没效果”。
-
@import (reference) "mixins.less";→ 变量可用，但所有选择器、规则块全被忽略 -
@import (inline) "reset.css";→ 内容原样插入，但不会做 Less 解析（比如嵌套@media会报错） -
@import (less) "reset.css";→ 把纯 CSS 当 Less 处理，若文件里有非法嵌套或未闭合块，直接报Unrecognised input，整条@import被静默丢弃
变量或 mixin 能用，但样式块消失的典型场景
你能在 .btn 里调用 .flex-center()，也能读到 @primary-color，但最终 CSS 里就是没有 .flex-center 对应的规则——说明定义它的那个文件，是用 (reference) 导入的，或者它自己又 @import 了别的文件，而那个文件因路径错误/循环依赖根本没加载成功。
- 检查被导入文件是否含
@import嵌套：比如button.less里写了@import "mixins.less";，那它的样式实际插入位置取决于button.less被谁导入、何时导入，而不是它自己写的顺序 - 用
lessc --verbose index.less查看编译过程，观察哪些文件被跳过或报错（尤其注意Cannot access property这类提示，往往意味着某次@import失败后继续执行，后续依赖断链） - 临时把所有
(reference)改成普通@import，再编译一次：如果样式突然全出来了，就确认是(reference)误用；如果还是缺，说明有文件根本没加载进去
Webpack 中 less-loader 的 paths 配置不解决缺失问题
less-loader 的 paths 只管“去哪找文件”，不管“找没找到”或“找完之后要不要用”。路径配错了，编译直接失败；路径对了但文件里有语法错误，Less 会跳过整个 @import 并继续往下走，结果就是静默丢失样式。
立即学习“前端免费学习笔记（深入）”；
- 确保所有
@import都带后缀：@import "variables.less";而不是@import "variables";（后者在开启javascriptEnabled时可能触发 JS 执行，导致不可控行为） - 禁用
javascriptEnabled: true（默认为false），避免@import被当成 JS 表达式求值，绕过路径解析直接报错 - 在
lessOptions.additionalData里注入内容，等价于在入口文件开头加了一段代码——但它会破坏你手动写的@import顺序，绝对不要用它来替代显式的@import "variables.less";
最容易被忽略的一点：Less 不报“文件未找到”的明确错误，而是把失败的 @import 当作空操作处理。你得主动验证每个被导入的文件是否真被解析了——最简单的方法，是在可疑文件第一行加个无害的注释 // @DEBUG: loaded，然后 grep 编译后的 CSS，看它出没出现。
