必须显式启用 Source Map 才能调试 .less 文件；lessc 需加 --source-map 参数，Webpack 中 less-loader 和 css-loader 均需开启 sourceMap: true，并验证 .css 末尾注释、.map 文件可访问及 DevTools 设置正确。
必须显式生成并加载有效 Source Map，否则浏览器永远只显示编译后的 CSS 行号，无法跳转到 .less 文件。
lessc 命令行编译必须加 --source-map 参数
Less 4.0+ 默认关闭 Source Map，不加参数就等于没配。常见错误是只写 lessc styles.less styles.css，结果 CSS 文件末尾没有 /*# sourceMappingURL=styles.css.map */ 注释。
-
lessc --source-map=styles.css.map styles.less styles.css：生成独立.map文件（推荐） -
lessc --source-map-inline styles.less styles.css：把 map 内容 base64 编码后塞进 CSS 底部（适合快速验证，但体积大） - 路径必须写全：
lessc --source-map src/main.less dist/main.css才合法；lessc --source-map main.less会报错 - 若用了
@import，建议加--source-map-include-sources，否则.map里sourcesContent字段为空，浏览器显示“could not load content”
Webpack 中 less-loader 和 css-loader 都要开 sourceMap: true
只在 less-loader 里设 sourceMap: true 不够——CSS 提取和解析环节断了，.map 就不会写入最终 CSS 文件。
-
less-loader的options.sourceMap = true -
css-loader的options.sourceMap = true（style-loader不干预，不用动） - Vue CLI 项目还需在
vue.config.js中补上css.loaderOptions.less.javascriptEnabled = true，否则@import解析失败会导致映射链断裂 - 检查最终输出的
.css文件末尾是否真有且仅有一行/*# sourceMappingURL=xxx.css.map */，后面不能有空行或注释
浏览器里点不到 .less 文件？先确认三件事
不是配置“看起来生效”，而是要验证它真能被浏览器读到、解析、显示。
立即学习“前端免费学习笔记（深入）”；
- 手动访问
http://localhost:3000/styles.css.map，HTTP 状态码必须是 200，响应体是合法 JSON，且sources字段里的路径（如["../src/button.less"]）能被当前 Web 服务直接返回内容（curl -I测试） - Chrome DevTools → ⚙️ Settings → Preferences → Sources → 勾选
Enable CSS source maps - Sources 面板中应出现
.less文件（通常在webpack://或file://下），右键某条 CSS 规则 → “Reveal in Sources” 能准确定位 - 断点只能打在声明语句上（如
.btn { color: @primary; }），无法调试@primary变量怎么算出来的，也无法单步进入.mixin()内部
最容易被忽略的是缓存链路：改了 .less 文件后，浏览器可能仍加载旧 CSS，而它带的旧 sourceMappingURL 会去拉一个早已被构建脚本删掉的 .map 文件。开发时务必禁用网络缓存（Network → Disable cache），或清空浏览器缓存再试。
