Less SourceMap 的 sources 路径 404 是因相对路径（如 "../src/variables.less"）在部署后不可访问，需通过 --source-map-rootpath 指定可访问的绝对路径（如 "/static/src/variables.less"），并确保 .map 文件中 sources 所有路径均可被浏览器直接请求成功。
Less 编译后 CSS 在浏览器里点不开源文件，或者跳转到错误的 .less 行号，不是配置漏了，就是路径没对齐——sourceMappingURL 指向的 .map 文件本身没问题，但里面 sources 字段写的路径浏览器根本访问不到。
SourceMap 的 sources 路径为什么总是 404
编译生成的 styles.css.map 里 sources 默认存的是相对路径，比如 ["../src/variables.less"]。生产环境部署后，静态资源只在 /dist/ 下，../src/ 根本不在 Web 服务可访问范围内，浏览器请求直接 404。
- 用
lessc --source-map-include-names --source-map-rootpath=/static/ styles.less styles.css，让sources变成["/static/src/variables.less"] - Webpack 用户要同时开三个地方的
sourceMap：less-loader 的sourceMap: true、css-loader 的sourceMap: true、style-loader 不禁用（默认不干预） - Vue CLI 项目还得在
vue.config.js的css.loaderOptions.less里加javascriptEnabled: true，否则@import解析会失败，间接导致 SourceMap 断链
Chrome DevTools 显示 “no sources” 怎么查
不是插件问题，也不是 DevTools 坏了，大概率是构建产物和部署结构不一致，或者缓存干扰了映射关系。
- 先手动
curl https://yoursite.com/styles.css.map，确认响应体里sources数组每个路径都能curl通 - 检查
styles.css文件末尾的注释是否严格匹配：/*# sourceMappingURL=styles.css.map */，名字错一个字符就失效 - 硬刷前务必打开 DevTools 的
Disable cache，否则可能加载旧 CSS，它带的旧sourceMappingURL会去拉旧.map，而旧文件早已被构建脚本删掉 - Webpack 用户注意
devtoolModuleFilenameTemplate，别用默认的webpack://协议，改成"[absolute-resource-path]"，避免被浏览器策略拦截
Less 变量改了但 CSS 没更新，SourceMap 还指向老文件
这不是编译工具的问题，是缓存链路出了断点：CSS 文件内容变了，但 sourceMappingURL 注释没同步更新，或浏览器缓存了旧 CSS，导致它继续找旧 .map，而那个 .map 里记录的仍是上一版的 sources 和 line 映射。
立即学习“前端免费学习笔记（深入）”；
- 构建时给 CSS 和
.map都加上内容哈希，例如styles.[contenthash].css和styles.[contenthash].css.map，从根源切断缓存歧义 - 检查 CI/CD 构建日志，确认每次编译都重新生成了
.map，而不是复用了上一轮产物 - 本地开发时如果用
less-watch-compiler，注意它默认不重写sourceMappingURL，需加--source-map参数并确保输出路径一致
最麻烦的不是配不配得出来，而是配完之后没人验证 .map 文件里的 sources 是否真能被浏览器 GET 到——上线前 curl 一下，比看十遍文档都管用。
