source map 必须在 css 压缩前由 lessc 生成且不被 clean-css 破坏，正确顺序是先生成带 map 的 css 再压缩；webpack/vue cli 需全链路开启 sourcemap 并校准路径，否则浏览器无法定位 .less 源码行。
压缩后的 CSS 无法定位到 .less 源码行，不是编译器“丢信息”，而是 Source Map 没生效或被覆盖——必须在压缩前生成、且不被压缩工具破坏。
Source Map 必须在压缩前生成，不能依赖 --compress
--compress 会抹掉所有换行和空格，包括末尾的 /*# sourceMappingURL=... */ 注释，导致浏览器根本看不到 Source Map。它不生成、也不保留映射关系。
- 命令行正确顺序：
lessc --source-map=styles.css.map styles.less styles.css && cleancss -o styles.min.css styles.css（先生成带 map 的可读 CSS，再压缩） - Webpack 中：确保
less-loader和css-loader都开启sourceMap: true，且css-minimizer-webpack-plugin的sourceMap选项也为true - Vue CLI 项目额外加
css.loaderOptions.less.javascriptEnabled = true，否则@import解析失败会导致 Source Map 断链
clean-css 压缩后 Source Map 失效的常见原因
clean-css 默认把原始 .css 的 Source Map 内联进压缩文件，但若原始文件没 map 或路径错，压缩后就变成空链接或 404。
- 加
--source-map-inline强制内联，避免外部.map文件丢失 - 禁用 clean-css 自动重写路径：
--no-rebase，否则它可能把../src/button.less改成src/button.less，而服务器没部署该路径 - 检查压缩后 CSS 底部是否还有
/*# sourceMappingURL=... */；没有？说明 clean-css 把它删了，需加--source-map-include-content
浏览器里点不到 .less 文件？先确认 map 路径是否可访问
DevTools 显示 “No sources” 或跳转 404，大概率是 sources 字段里的路径不在 Web 服务托管范围内，比如写的是 ../src/variables.less，但实际只部署了 /dist/。
- 用
lessc --source-map-rootpath=/static/ --source-map-include-names，让sources变成["/static/src/variables.less"] - Webpack 中设
devtoolModuleFilenameTemplate: "[absolute-resource-path]"，避免默认的webpack://协议被拦截 - 上线前手动
curl https://yoursite.com/styles.min.css.map，再对每个sources里的路径curl -I确认返回 200
真正卡住调试的，从来不是压缩本身，而是 Source Map 在哪一环断了——lessc 没开、cleancss 删了、路径没对齐、或者浏览器缓存了旧 CSS 带着旧 sourceMappingURL。每一步都得单独验证，不能假设“开了就等于通”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
