vs code 中 less 报错不跳转到正确行号，根本原因是 source map 未生效或映射路径不可访问。需确保 lessc 命令加 --source-map 参数、less-loader 与 css-loader 均启用 sourcemap、mini-css-extract-plugin 配置 publicpath: ''，并使开发服务器可访问 .less 源文件路径。
VS Code 里 Less 报错不跳转到正确行号，根本不是编辑器问题，而是 Source Map 没生效或映射路径失效。 编译器输出的错误位置（比如 styles.less:12:3）在 VS Code 中点不开、跳错、甚至显示 “no sources”，90% 是因为 .map 文件没被加载，或者它里面的 sources 路径浏览器/VS Code 根本访问不到。
Less 编译命令漏了 --source-map 参数
Less 4.0+ 默认关闭 Source Map，lessc styles.less styles.css 这样跑，压根不生成 .map 文件。VS Code 想定位也无从下手。
- 命令行编译必须显式加：
lessc --source-map=styles.css.map styles.less styles.css - 如果用了
@import，建议再加--source-map-include-names，避免路径缩写导致跳转失败 - 想让
sources字段写成可访问的绝对路径（比如/static/src/variables.less），得配--source-map-rootpath=/static/
Webpack 项目里 less-loader 和 css-loader 都没开 sourceMap
devtool: 'source-map' 对 CSS 完全无效，它只管 JS。Less → CSS → 最终产物这条链上，只要中间一个 loader 关了 sourceMap，映射就断了。
-
less-loader的options必须写明：sourceMap: true（默认是false） -
css-loader的options同样要设：sourceMap: true，否则它会把 less 生成的 map “吃掉”，再吐一个只含自身转换信息的新 map - 用了
mini-css-extract-plugin？必须加publicPath: ''，否则sourceMappingURL写成绝对路径，部署子路径时直接 404
VS Code 找不到 .less 文件，因为 sources 路径不可访问
就算 .map 文件生成了，里面 sources 字段写的路径（比如 ["../src/variables.less"]）在开发服务器上打不开，VS Code 就只能显示 “No source available”。
- 手动
curl https://localhost:8080/styles.css.map，检查响应体中每个sources路径是否都能curl -I返回 200 - Webpack 项目可在
devtoolModuleFilenameTemplate里设为'[absolute-resource-path]'，避免webpack:///协议被拦截 - Vue CLI 用户别忘了在
vue.config.js中补上：css.loaderOptions.less.javascriptEnabled = true，否则@import解析失败会导致sources填错路径
最常被忽略的一点：VS Code 不托管 .less 源文件。即使 .map 正确，如果 Webpack Dev Server 没把 src/ 目录作为静态资源暴露出去，浏览器和 VS Code 都无法读取原始文件——这时候光配对路径没用，得确保开发服务真能返回 200。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
