less-loader 必须显式设置 sourceMap: true，因 Webpack 的 devtool 对 CSS 无效；css-loader 和 mini-css-extract-plugin 也需同步开启 sourceMap 并配置 publicPath: '' 以确保路径正确；.map 文件及 .less 源文件须可访问，且 sourceMappingURL 注释需实时更新防缓存。
less-loader 必须显式设 sourceMap: true
Webpack 的 devtool 配置对 CSS 完全无效，它只作用于 JS 层。哪怕你写了 devtool: 'source-map'，less-loader 默认仍不生成 .map 文件。
常见错误是只配了全局 devtool，却漏掉 loader 层级的开关。必须在 less-loader 的 options 中硬编码开启：
use: [{
loader: 'less-loader',
options: {
sourceMap: true
}
}]
- 不写这行，浏览器点 CSS 规则永远跳不到
.less文件 -
sourceMapFileInline: false可省略（默认行为更稳定，避免 base64 内联干扰路径解析） - Vue CLI 用户额外确认
vue.config.js中css.loaderOptions.less.javascriptEnabled = true，否则@import路径解析失败会导致sources字段错乱
css-loader 和 mini-css-extract-plugin 也得同步开
Less 编译链路上，less-loader 生成的 map 会被后续 loader 覆盖或截断。如果 css-loader 没开 sourceMap: true，它会“吃掉”原始 map，再吐一个仅含自身转换信息的新 map，导致行号偏移几行甚至跳到空白处。
-
css-loaderV5+ 默认开启sourceMap，但老项目可能被手动关过，务必检查 - 用了
mini-css-extract-plugin？它默认把sourceMappingURL写成绝对路径（如/css/app.css.map），而开发服务器常跑在子路径下（如/myapp/），结果浏览器按当前 CSS URL 解析相对路径时 404 - 解决方法：在插件配置中加
publicPath: ''，强制生成相对路径注释
确保 .map 和 .less 源文件都能被浏览器访问
浏览器靠 CSS 文件末尾的 /*# sourceMappingURL=app.css.map */ 去加载映射文件，再靠 .map 里的 sources 字段（如 ["./src/styles/main.less"]）去定位源码。两个环节任一不可达，都会显示 “No sources found”。
- 用
curl -I http://localhost:8080/app.css.map确认响应状态是 200 - 打开 .map 文件，检查
sources数组里的每个路径是否都能curl -I通（比如../src/variables.less在生产环境可能根本没部署） - Webpack Dev Server 默认不托管
.less源码，需在devServer.static或devServer.watchFiles中显式包含src/**/*.less - VSCode 打断点跳不到 .less？确认你打开的是包含
src/的根目录，否则无法按sources里的路径定位
命令行编译也要带 --source-map
脱离 Webpack 时（比如用 lessc 直接编译），Less 4.0+ 默认关闭 SourceMap，漏掉参数就等于白配。
- 基础用法：
lessc --source-map=styles.css.map styles.less styles.css - 要控制
sources中的路径前缀，加--source-map-rootpath=/static/，让路径变成["/static/src/variables.less"] - WebStorm 用户改 File Watcher 的
Arguments：填$FileName$ $FileNameWithoutExtension$.css --source-map，并把Output paths to refresh改为$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
实际调试时最容易忽略的是：CSS 文件内容更新了，但末尾的 sourceMappingURL 注释没同步，或者浏览器缓存了旧 CSS——它带的旧注释会去拉一个早已被构建脚本删掉的 .map 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
