@import (reference) 仅加载变量和 mixin，忽略所有 css 规则；@import (less) 遇 css 文件解析失败会静默丢弃；.module.less 空文件多因 webpack rules 未匹配；路径错误或缺后缀导致嵌套 import 断链。
Less @import (reference) 导致样式不输出
写了 @import (reference) "mixins.less"，变量和 mixin 能用，但最终 CSS 里没有对应的选择器规则——这是最典型的“导入了却没效果”。(reference) 模式只加载变量/mixin，所有 CSS 块（比如 .flex-center { display: flex; }）会被完全忽略，编译器连看都不看。
实操建议：
- 临时把所有
@import (reference)改成普通@import，重新打包：如果样式突然全出来了，就确认是误用了(reference) - 只在真正需要“仅复用逻辑、不输出样式”的场景用
(reference)，比如纯工具函数文件 - 别指望
(reference)文件里的@import会递归生效——它整个文件都被跳过，子导入根本不会执行
@import (less) 遇错静默丢弃整条语句
写 @import (less) "reset.css" 本意是让 Less 解析它，但 reset.css 是纯 CSS，含 html { margin: 0; } 这类无分号、无引号的写法，Less 解析器直接报 Unrecognised input，然后整条 @import 被静默丢弃，后续依赖链断掉，下游样式全丢。
实操建议：
- 纯 CSS 文件必须用
@import (css)，不是(less)，也不是裸@import -
@import (css)必须放在主入口文件最顶部，且路径要带别名前缀，如@import (css) "~normalize.css/normalize.css" - 用
lessc --verbose index.less查看编译日志，注意 “Cannot access property” 或 “skipping import” 类提示，它们往往指向被跳过的文件
Webpack 中 module.less 文件内容为空
用 MiniCssExtractPlugin 打包时，xxx.module.less 输出的 CSS 文件为空，但 main.less 正常——问题不在 Less 语法，而在 Webpack 的 module.rules 配置漏掉了对 .module.less 的匹配。
实操建议：
- 检查
test正则是否覆盖.module.less：应为/\.module\.less$/或更宽泛的/\.less$/，不能只写/\.moudle\.less$/（拼错） - 确保
include路径包含该文件所在目录，尤其当它在src/pages/或src/components/下时 - 避免
enforce: 'pre'错位：如果给.css规则加了enforce: 'pre'，但没同步加到.less规则上，可能导致 loader 执行顺序错乱，CSS 提取失败
路径错误或嵌套 import 断链
文件 A @import "B.less"，B 又 @import "C.less"，但 C 的路径写成 @import "../utils/variables.less"，而实际项目结构是 src/less/utils/variables.less——Less 不会自动补全，找不到就跳过，B 的样式块也不输出，A 就收不到任何来自 B 的规则。
实操建议：
- 所有
@import必须带后缀：@import "mixins.less"，不要省略.less - 禁用
javascriptEnabled: true（默认为false），否则@import "vars"可能被当成 JS 表达式求值，绕过路径解析直接报错 - 用绝对路径或 Webpack 别名（如
@/styles/mixins.less）替代相对路径，减少层级判断失误
@import 被静默跳过，或者 (reference) 用错了位置，得靠 --verbose 日志一层层查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
