less编译后行号对不上源文件，根本原因是webpack的devtool与less-loader未协同：devtool仅处理js层source map，less-loader必须显式配置sourcemap: true，且css-loader等中间loader也需开启sourcemap，否则css层映射缺失或被覆盖，导致行号偏移。
Less编译后行号对不上源文件？不是浏览器问题，是devtool和less-loader没协同
Less源码里第12行写的@import，编译后CSS显示在第87行生效，点进去却跳到第91行——这不是浏览器解析错，而是Webpack的devtool和less-loader各自生成了不一致的Source Map，最终叠加偏移。
根本原因：Webpack的devtool只管JS层映射，less-loader默认不生成CSS层Source Map；两者若都开了但配置粒度不同（比如devtool: 'source-map' + less-loader没设sourceMap: true），浏览器拿到的CSS Source Map就只包含less → css这一步，缺失webpack loader链的中间转换信息，导致行号漂移。
-
devtool设为'source-map'或'inline-source-map'时，仅影响JS产物，对CSS无作用 -
less-loader必须显式启用sourceMap: true，否则不会输出.css.map或注入sourceMappingURL - 若同时用
css-loader，它的options.sourceMap也得是true，否则会把less生成的map“吃掉”再吐出一个残缺的 - Vue CLI项目还需确认
vue.config.js中未覆盖devtool为false，且css.loaderOptions.less.javascriptEnabled为true（否则@import路径解析异常，间接导致sources路径错乱）
Webpack 5+下mini-css-extract-plugin导致sourceMappingURL路径失效
用了mini-css-extract-plugin抽离CSS后，浏览器控制台报Failed to load source map: Could not load content for http://localhost:8080/css/app.css.map: HTTP error: status code 404，但app.css.map明明存在——大概率是插件把sourceMappingURL写成了绝对路径，而开发服务器实际托管在子路径下（如/myapp/）。
该插件默认将sourceMappingURL设为http://localhost:8080/css/app.css.map，但Webpack Dev Server实际服务地址可能是http://localhost:8080/myapp/，导致浏览器按当前CSS URL解析相对路径时404。
- 在
mini-css-extract-plugin配置中显式覆盖publicPath: ''，强制生成相对路径：filename: '[name].css', publicPath: '' - 检查
output.publicPath是否与Dev Server的devServer.publicPath一致，不一致会导致sourceMappingURL注释里的路径前缀错位 - 用
curl -I http://localhost:8080/css/app.css确认响应头Content-Type: text/css且末尾有/*# sourceMappingURL=app.css.map */，再手动访问该URL验证可访问性
VSCode调试Less断点跳转失败：sources路径不匹配
Chrome DevTools能显示variables.less:5，但点进去提示“Sources not found”，或者VSCode里打不了断点——不是Source Map没生成，而是sources字段里的路径VSCode找不到对应文件。
Less编译器填进Source Map的sources通常是相对路径（如./src/styles/variables.less）或webpack:///协议路径（如webpack:///./src/styles/variables.less）。VSCode必须以包含src/的目录为根工作区，才能按此路径定位。
- 打开VSCode时，确保工作区根目录是项目顶层（含
package.json），而非只打开src/子目录 - 检查Source Map文件里
sources数组内容，用jq '.sources' app.css.map快速查看；若含webpack:///前缀，说明Webpack参与了路径生成，需确认resolve.alias或module.rules没意外改写路径 - 开发服务器必须托管
.less源文件：Webpack Dev Server默认不托管.less，需在devServer.static中显式添加{ directory: path.resolve(__dirname, 'src'), publicPath: '/' }，否则Chrome加载不到原始内容
Less 4.0+命令行编译漏掉--source-map参数
直接用lessc编译，浏览器里始终只看到style.css，没有style.less——Less 4.0+起默认关闭Source Map，不加--source-map参数就不会生成.map文件，更不会有sourceMappingURL注释。
即使你写了lessc styles.less styles.css，只要没带--source-map，产出的CSS末尾就绝不会出现/*# sourceMappingURL=styles.css.map */，浏览器连找映射文件的机会都没有。
- 命令行必须显式加参数：
lessc --source-map=styles.css.map styles.less styles.css -
--source-map值可以是路径（生成独立文件）或true（内联base64），但内联方式在大型项目中易触发浏览器解析超时，建议用独立文件 - 如果用了
@import嵌套，确保所有被导入的.less文件都在同一工作目录下可读，否则编译器无法将其路径写入sources字段 - 执行后检查
styles.css末尾是否有sourceMappingURL注释，并确认styles.css.map文件真实存在且内容合法（可用jq '.' styles.css.map验证JSON结构）
最常被忽略的一点：Source Map不是“开了就灵”，它是一条链——less-loader生成、css-loader透传、mini-css-extract-plugin修正路径、开发服务器托管源文件、浏览器按URL解析、编辑器按sources路径定位。任一环路径不对或开关未开，都会导致行号偏移或跳转失败。调试时优先查sources字段内容和sourceMappingURL能否被浏览器GET通，比反复调devtool值更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
