Less编译后行号跳转错位根本原因是Source Map映射链断裂或sources路径不可访问，需在lessc命令中显式启用--source-map、Webpack中less-loader和css-loader均设sourceMap: true、MiniCssExtractPlugin配置publicPath: ''，并确保.map文件及sources中所有路径均可被开发服务器访问。
Less编译后行号跳转错位，根本不是编辑器或浏览器问题
VS Code 或 Chrome DevTools 点击报错行号跳到错误位置，90% 是 sources 字段里的路径不可访问，或映射链在某一层被截断。不是“没生成 .map”，而是生成了但浏览器/编辑器加载失败或解析失败。
命令行 lessc 必须显式带 --source-map 参数
Less 4.0+ 默认关闭 Source Map，lessc styles.less styles.css 不会生成任何映射文件，也不会在 CSS 末尾写 /*# sourceMappingURL=... */ 注释。
-
lessc --source-map=styles.css.map styles.less styles.css✅ 正确：生成独立styles.css.map，并注入合法注释 - 加
--source-map-include-names避免@import路径缩写成mixins.less，导致跳转时找不到真实文件 - 生产部署时用
--source-map-rootpath=/static/，让sources数组变成["/static/src/variables.less"]，而非相对路径["../src/variables.less"]（后者在子路径部署时必 404）
Webpack 项目里三处 sourceMap: true 缺一不可
devtool: 'source-map' 对 CSS 完全无效——它只管 JS。Less → CSS → 最终产物这条链上，漏掉任意一环，映射就断。
-
less-loader的options.sourceMap必须为true（默认false） -
css-loader的options.sourceMap同样要设true，否则它会把 less 生成的 map “吃掉”，再吐一个只含自身转换信息的新 map，造成行号漂移 - 用了
MiniCssExtractPlugin？必须加publicPath: ''，否则sourceMappingURL写成绝对路径（如http://localhost:8080/css/app.css.map），而实际服务跑在/myapp/下，浏览器按当前 CSS URL 解析相对路径时直接 404
验证 .map 文件是否真可用，别只看 DevTools Sources 面板
先手动确认 .map 文件本身能否被浏览器请求到，且内容合法：
立即学习“前端免费学习笔记（深入）”；
- 用
curl https://localhost:8080/styles.css.map拿响应体，检查 JSON 是否合法、sources字段是否非空（例如["/static/src/variables.less"]） - 对
sources里的每个路径，再curl -I一次，确认返回200；出现404不是文件没生成，是部署结构和路径配置不匹配 - 如果
sources里出现webpack:///./src/variables.less这类协议路径，Chrome 可能加载，但 VS Code 无法定位——它需要真实可访问的 HTTP 路径
最常被忽略的一点：VS Code 不托管 .less 文件，它只认开发服务器暴露出来的路径。哪怕 .map 生成正确，只要 sources 里写的路径在服务器上打不开，跳转就必然失败。
