Less编译Source Map失效的根本原因是less-loader未显式配置sourceMap: true，因Webpack的devtool仅作用于JS层，必须在less-loader options中强制开启，同时css-loader、mini-css-extract-plugin（需设publicPath: ''）及源码路径可访问性均需协同配置。
less-loader 必须显式开启 sourceMap
Webpack 默认不为 Less 编译生成 source map，哪怕你全局设了 devtool: 'source-map'，它只影响 JS。浏览器点不到 .less 文件，第一件事就是检查 less-loader 配置里有没有 sourceMap: true。
常见错误是只配了 Webpack 的 devtool，却漏掉 loader 层级的开关。必须在 less-loader 的 options 中写死：
module: {
rules: [{
test: /\.less$/,
use: [{
loader: 'less-loader',
options: {
sourceMap: true,
// sourceMapFileInline: false // 默认即可，避免 base64 内联
}
}]
}]
}顺带确认：css-loader 的 sourceMap 也得是 true（V5+ 默认开启，但老项目可能被手动关掉）。
sourceMappingURL 路径必须可访问且解析正确
浏览器靠 CSS 文件末尾的 /*# sourceMappingURL=app.css.map */ 去加载映射文件。如果路径不对，就会 404，DevTools 显示 “Sources not found”。
立即学习“前端免费学习笔记（深入）”；
典型问题包括：
-
publicPath没配对：比如开发服务器跑在/myapp/下，但output.publicPath写成'/'，导致注释里生成http://localhost:8080/app.css.map，实际该文件在http://localhost:8080/myapp/app.css.map - 用了
mini-css-extract-plugin：它默认把sourceMappingURL设为绝对路径（如/css/app.css.map），需手动覆盖publicPath: ''或设filename: '[name].css'+options: { publicPath: '' } - 相对路径解析失败：CSS 在
/static/css/app.css，但.map放在/css/app.css.map，浏览器按 CSS 当前 URL 解析，自然找不到
VSCode 和浏览器都要能读到 .less 源文件
Source map 不只是有 .map 文件，还要能访问原始 .less 文件本身。
开发时，Webpack Dev Server 默认不托管 .less 源码，所以即使 .map 正确，Chrome DevTools 仍会提示 “No sources found”。解决方法：
- 确保 Webpack 配置中
devServer.static或devServer.watchFiles包含src/**/*.less（或对应源码路径） - VSCode 断点打在 CSS 行上跳不到
.less？检查.map文件里的sources字段，比如["webpack:///./src/styles/main.less"]—— VSCode 必须打开的是包含src/的根目录，否则无法按这个路径定位 - 如果用了
@import './mixins.less'，而mixins.less在src/styles/，那sources里的路径就得真实存在且可映射
Less 编译器填的路径协议容易被忽略
Less 编译后生成的 sources 字段，常带 webpack:/// 协议路径（如 webpack:///./src/styles/button.less）。这不是 URL，而是 Webpack 内部标识符，依赖 DevTools 和编辑器识别该协议。
VSCode 能识别 webpack:///，但前提是：
- 工作区根路径与 Webpack 的
context一致（通常就是项目根） - 没启用
sourceMapRoot并指向错误位置 - 没用第三方构建工具覆盖了 Webpack 的 source map 格式（比如某些定制版 less-loader fork）
最易被忽略的一点：webpack:/// 路径中的 . 是相对于 context 的，不是当前文件所在目录。一旦 context 配错（比如设成了 src/），所有 sources 就全偏了。
