Less 编译后 CSS 源映射失败主因是 sourceMappingURL 缺失、.map 文件加载失败或 sources 路径不可访问；需显式启用 --source-map、配置各 loader sourceMap 选项、确保 .map 及源文件可被浏览器直接访问。
Less 编译后的 CSS 无法正确映射源文件，**90% 是因为 sourceMappingURL 注释缺失、.map 文件加载失败，或 sources 字段里的路径根本不可访问**——不是 DevTools 抽风，也不是浏览器兼容问题。
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 文件，并在 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 文件本身有效，但 sources 路径 404
别只看 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这类协议路径，VS Code 或 Chrome 可能无法定位，改用devtoolModuleFilenameTemplate: '[absolute-resource-path]'替换掉默认的webpack://
最常被忽略的一点：SourceMap 不只是有 .map 文件，还要能访问原始 .less 文件本身。Webpack Dev Server 默认不托管 .less 源码，所以即使 .map 正确，Chrome DevTools 仍可能提示 “No sources found”。必须确保 devServer.static 或 devServer.watchFiles 包含 src/**/*.less。
