less 4.0+ 默认不生成 source map，必须显式启用 --source-map 参数，否则 css 末尾无 sourcemappingurl 注释、devtools 不显示源文件；webpack 项目还需在 less-loader、css-loader 及 mini-css-extract-plugin 中同步开启 sourcemap 并配置路径对齐，最后验证 .map 文件及其 sources 路径可访问。
必须显式开启，否则根本不会生成 Source Map —— Less 4.0+ 默认关闭该功能，不加参数就等于没配，CSS 文件末尾压根不会有 /*# sourceMappingURL=xxx.css.map */ 注释，DevTools 里连“跳转源文件”这个选项都不会出现。
lessc 命令行编译必须带 --source-map
直接运行 lessc styles.less styles.css 不会生成任何映射文件，也不写注释。要启用，必须明确指定：
-
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"]，而非默认的["../src/variables.less"]—— 后者在 Nginx 只托管/static/css/时必然 404
Webpack 项目三处 sourceMap: true 缺一不可
devtool: 'source-map' 对 CSS 完全无效，它只管 JS。Less → CSS → 最终产物这条链上，任何一个环节关掉 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 无法定位 —— 它需要真实可访问的本地路径或已托管的 HTTP 路径
最容易被忽略的是缓存干扰：即使所有配置都对，浏览器或 CDN 缓存了旧版 CSS 或 .map 文件，也会导致跳转错位。上线后务必清缓存，或加版本哈希（如 styles.css?v=1.2.3）强制刷新映射关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
