Less命令行编译必须显式加--source-map，因Less 4.0+默认不生成SourceMap；漏配会导致CSS末尾无sourceMappingURL注释、DevTools显示“no sources”。
Less命令行编译必须显式加--source-map
Less 4.0+ 默认完全不生成 SourceMap，不加参数就等于没配。很多线上环境 CSS 文件末尾压根没有 sourceMappingURL 注释，根源就是漏了这个开关。
常见错误现象：styles.css 里最后一行是空的，或只有旧版本残留的注释（比如指向已删除的 styles.css.map）；浏览器 DevTools 的 Sources 面板显示 “no sources”。
-
lessc styles.less styles.css→ ❌ 不会生成 .map -
lessc --source-map=styles.css.map styles.less styles.css→ ✅ 生成独立 .map 文件 - 若要控制 .map 中
sources字段的路径格式，必须搭配--source-map-include-names和--source-map-rootpath=/static/，否则默认的../src/variables.less在生产环境必然 404
Webpack项目需三处同时开启sourceMap
只在 devtool: 'source-map' 或只开 less-loader 的 sourceMap: true 是不够的。CSS 的 SourceMap 是跨 loader 传递的链条，断一环就失效。
-
less-loader：options 里必须写sourceMap: true（不是靠全局devtool） -
css-loader：同样要设sourceMap: true，否则它会把 CSS 内容转成 JS 模块时丢掉映射 -
style-loader：默认不干预，但若用了mini-css-extract-plugin，得手动关掉它的绝对路径行为：publicPath: '' - Vue CLI 用户额外注意：
vue.config.js中css.loaderOptions.less下必须有javascriptEnabled: true，否则@import解析失败会导致 SourceMap 断链
SourceMap 路径 404 的核心是 sources 字段不可访问
浏览器能加载 styles.css.map，但点不开 variables.less，不是文件没生成，而是 sources 数组里写的路径根本不在 Web 服务的可访问范围内。
立即学习“前端免费学习笔记（深入）”；
- 默认生成的
sources: ["../src/variables.less"]→ Nginx/CDN 只托管/static/css/，../src/无对应路由，必 404 - 用
--source-map-rootpath=/static/后，sources变成["/static/src/variables.less"]，再确保 Nginx 配置了location /static/src/指向源码目录 - 或者更简单：把
.less文件也放进构建产物（如dist/static/src/），和.map放同级，靠相对路径解析（但要注意安全风险） - 务必手动
curl https://yoursite.com/styles.css.map，检查响应体中每个sources路径是否都能curl -I返回 200
缓存导致 SourceMap 错位比配置错误更难排查
CSS 文件内容更新了，但 sourceMappingURL 注释没变，或浏览器缓存了旧 CSS，就会去拉旧 .map，而那个文件里记录的仍是上一版的 sources 和行号映射。
- 构建时给 CSS 和 .map 都加上内容哈希：
styles.[contenthash].css+styles.[contenthash].css.map，从源头切断缓存歧义 - 上线前硬刷页面时，DevTools 必须勾选 Disable cache，否则很可能看到的是旧映射
- 检查
styles.css末尾注释是否严格匹配：/*# sourceMappingURL=styles.[hash].css.map */，少一个点、多一个空格都会失效 - Webpack 用户注意
devtoolModuleFilenameTemplate，别用默认的webpack:///协议路径，改成"[absolute-resource-path]"，避免被浏览器拦截
真正卡住人的往往不是“怎么开”，而是“开了之后路径对不对、缓存干不干净、服务能不能返回源文件”。这些环节任何一个松动，SourceMap 就变成摆设。
