less 默认不生成 source map，必须显式启用 --source-map；webpack 中 less-loader、css-loader 和 mini-css-extract-plugin 均需正确配置 sourcemap 与 publicpath；.map 文件及其 sources 路径必须可被浏览器直接访问且返回 200。
Less 默认不生成 Source Map，lessc 命令不加 --source-map 就等于没配——浏览器连找映射文件的机会都没有，更别说跳转到正确行号。
lessc 命令必须显式启用 --source-map
Less 4.0+ 彻底移除了默认生成 Source Map 的行为。只跑 lessc styles.less styles.css，CSS 文件末尾不会出现 /*# sourceMappingURL=styles.css.map */ 注释，DevTools 根本无从加载映射。
-
lessc --source-map=styles.css.map styles.less styles.css✅ 生成独立.map文件，并在 CSS 末尾写入正确注释 - 若含
@import，追加--source-map-include-names，避免sources字段缩写成mixins.less而非完整路径，否则跳转失败 - 路径错位？用
--source-map-rootpath=/static/让sources变成["/static/src/variables.less"]，再确保开发服务器或 Nginx 能响应这个路径
Webpack 项目三处 sourceMap 必须同时开启
devtool: 'source-map' 对 CSS 完全无效，它只管 JS 层。Less → CSS → 最终产物这条链上，任何一个 loader 关了 sourceMap，映射就断掉。
-
less-loader的options里必须写sourceMap: true（默认是false） -
css-loader的options同样要设sourceMap: true，否则它会“吃掉” less 生成的 map，再吐一个只含自身转换信息的新 map，造成行号漂移 - 用了
mini-css-extract-plugin？必须加publicPath: ''，否则sourceMappingURL会被写成绝对路径（如http://localhost:8080/css/app.css.map），而服务实际跑在/myapp/下，浏览器按当前 CSS URL 解析相对路径时直接 404
验证 .map 文件是否真正有效
别只看 CSS 末尾有没有注释，也别只点开 DevTools Sources 面板——先手动确认 .map 文件本身能不能被浏览器直接请求，且内容合法。
- 用
curl https://yoursite.com/styles.css.map拿到响应体，检查 JSON 是否合法、sources字段是否非空（例如["/static/src/variables.less"]） - 对
sources里的每个路径，再curl -I一次，确认返回 200；出现 404 不是文件没生成，是部署结构和路径配置不匹配 - 如果
sources里出现webpack:///./src/variables.less这类协议路径，Chrome 或 VS Code 可能无法定位，改用devtoolModuleFilenameTemplate: '[absolute-resource-path]'替换掉默认的webpack://
WebStorm 自动编译需手动补全参数
WebStorm 自动生成的 File Watcher 默认只输出 CSS，不带 source map；想在浏览器里准确调试原始 .less 文件，必须手动补全 --source-map 参数并校准输出路径。
- Arguments 改为：
lessc $FileName$ $FileParentDir$/css/$FileNameWithoutExtension$.css --source-map -
--source-map是 Less 的写法，注意不是--sourcemap（那是 Sass 的） - 若希望 CSS 和
.map都输出到与源文件同级，用$FileDir$而非$FileParentDir$，例如：lessc $FileName$ $FileDir$/$FileNameWithoutExtension$.css --source-map
最常被忽略的其实是 sources 字段里路径的可访问性——它不是“生成了就行”，而是必须能被浏览器直接 GET 到，且返回 200。哪怕所有配置都对，只要其中一条路径 404，整个 Source Map 就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
