less 4.x 编译无报错但css缺失样式，主因是@import静默跳过（如(reference)不输出规则、(less)遇错丢弃、路径错误）或/未括号导致输出无效css被浏览器忽略。
Less 4.x 中的语法错误大多不会直接报错行号，而是静默丢弃、输出无效 CSS 或中断编译 —— 你得从输出结果反推源头，而不是等错误提示。
为什么编译没报错但 CSS 少了样式？先查 @import 是否被跳过
Less 的 @import 不是运行时加载，是编译期文本拼接。一旦某次导入失败，后续依赖可能全断，但编译器常不报错，只静默跳过。
-
@import (reference) "mixins.less";→ 变量和 mixin 可用，但所有选择器规则都不输出，CSS 里自然看不到 -
@import (less) "reset.css";→ 把纯 CSS 当 Less 解析，遇到@charset或未闭合@media直接卡住，整条@import被丢弃 - 路径写错或含中文（如
@import "../组件/button.less";）→ 触发Unrecognised input，但错误可能被吞掉，只表现为“文件没加载” - 检查方法：
lessc --verbose index.less，观察日志中哪些文件被列出、哪些被跳过或报Cannot access property
为什么浏览器 DevTools 里 CSS 规则是灰色、不生效？重点扫 / 和 calc()
Less 4.x 把裸露的 / 当作字面量保留，不参与计算；calc() 等原生函数若不转义，会被当成 Less 表达式求值 —— 这两类问题都导致输出非法 CSS，浏览器静默忽略整条声明。
-
width: 100px / 4;→ 输出仍是width: 100px / 4;，DevTools 显示灰色，无报错 -
grid-gap: @gap / 2;→ 必须写成grid-gap: (@gap / 2);或grid-gap: @gap ./ 2; -
width: calc(100% - @offset);→ 必须转义：width: ~"calc(100% - @{offset})"; -
grid-area: 2/2/3/3;→/同样要转义：grid-area: ~"2/2/3/3";
为什么 VS Code 里没标红，但编译就崩？Stylelint 默认根本不认 Less 语法
VS Code 的 Stylelint 插件默认按 CSS 语法解析，遇到 .mixin()、@import (css) 或 ~"string" 就直接抛 Unexpected token，但这个错误常被忽略，因为插件没启用或配置错。
- 必须安装
postcss-less并在.stylelintrc.js中指定：customSyntax: "postcss-less" - VS Code 设置里要打开：
stylelint.enable: true，且stylelint.validate包含"less" - 右下角语言模式必须设为小写的
less（不是Less或Plain Text） - 没配
customSyntax时，Stylelint 根本不会跑，也就不会标红 —— 你以为它在工作，其实它压根没启动
为什么改了代码，CSS 却没更新？SourceMap 指向的可能是旧文件
SourceMap 不是“自动同步”的，它是一次性生成的映射关系。CSS 文件更新了，但末尾的 sourceMappingURL 注释没变，或浏览器缓存了旧 CSS，就会继续拉旧 .map 文件 —— 而那个文件可能早已被构建脚本删掉。
- 命令行编译必须显式加：
lessc --source-map=styles.css.map styles.less styles.css - Webpack 中确保
less-loader和css-loader都开了sourceMap: true - 上线前手动
curl https://yoursite.com/styles.css.map，确认响应体中sources字段里的每个路径都能curl -I通 - Chrome DevTools 中按
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win），输入 “Disable cache” 并勾选，再刷新
最易被忽略的是：所有含 / 的声明，都得人工扫一遍生成的 CSS 文件，确认是否被原样输出 —— 因为 Less 4.x 对这类错误完全不报错，也不警告。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
