Less 编译后 Source Map 失效主因是 sourceMappingURL 注释缺失、.map 文件加载失败或 sources 路径不可访问；需显式启用 --source-map、配置 less-loader/css-loader sourceMap、确保源文件可被服务器访问且路径匹配。
Less 编译后 Source Map 失效，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 文件是否真正有效
别只看 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://
Vue CLI 用户额外注意 javascriptEnabled
Vue CLI 默认禁用 Less 的 JavaScript 表达式支持，导致 @import 路径解析失败，间接让 sources 字段填错路径甚至为空——Source Map 断链的第一环往往在这里。
- 在
vue.config.js中必须显式配置：css.loaderOptions.less.javascriptEnabled = true - 同时确认
devtool没被覆盖为false，且css-loader的sourceMap未被其他插件意外关闭 - 构建产物中 CSS 和
.map文件建议都加上内容哈希（如styles.[contenthash].css），避免缓存旧 CSS 导致它仍引用已删除的旧.map
最常被忽略的一点：开发服务器默认不托管 .less 源文件。即使 .map 正确生成、sources 路径可访问，如果 Webpack Dev Server 或本地静态服务没把 src/ 目录挂载出去，浏览器照样显示 “Sources not found”。
