less-loader 必须显式配置 sourceMap: true，因 Webpack devtool 对 CSS 无效；css-loader、postcss-loader、MiniCssExtractPlugin 也需各自开启 sourceMap 并对齐路径，否则源码映射断裂。
less-loader 必须显式开启 sourceMap
Webpack 默认不传递 sourceMap 信息给 less-loader，即使你配了 devtool，它也完全无视——devtool 只影响 JS，对 CSS 链路无效。必须在 less-loader 的 options 中手动设 sourceMap: true。
常见错误：只在 css-loader 或 postcss-loader 开了 sourceMap，但漏掉 less-loader，结果 Less 源码行号直接丢失，跳转到空白或错位位置。
-
less-loader@6+：用{ loader: 'less-loader', options: { sourceMap: true } } -
less-loader@7+：同上，但注意less本身版本需 ≥4.0，否则--source-map行为不兼容 - 若项目含
@import，建议额外加sourceMapIncludePaths: true（部分版本支持），避免sources字段缩写成mixins.less而非完整路径
css-loader 和 MiniCssExtractPlugin 都不能吃掉 map
css-loader 默认会“消化”上游传来的 Source Map 并生成新映射，导致行号漂移；MiniCssExtractPlugin 默认把 sourceMappingURL 写成绝对路径（如 http://localhost:8080/css/app.css.map），而实际开发服务器常挂载在子路径（如 /myapp/）下，浏览器按当前 CSS URL 解析相对路径时直接 404。
-
css-loader必须配{ sourceMap: true }，否则它会丢弃less-loader传来的原始映射 -
MiniCssExtractPlugin.loader的options.publicPath设为空字符串''，让sourceMappingURL保持相对路径（如app.css.map），由浏览器按当前 CSS 文件位置解析 - 如果用了
postcss-loader（比如加了autoprefixer或px2rem），它的sourceMap: true也不能少，否则 PostCSS 处理阶段也会截断映射链
验证 .map 文件是否真能被加载
DevTools 里看不到源文件，往往不是没生成，而是 .map 文件或其中 sources 列表里的路径根本请求不到。别只盯着 Sources 面板，先手动验证 HTTP 层。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具 → Network 标签页，刷新页面，过滤
css.map，确认该请求返回 200 且响应体是合法 JSON - 检查 JSON 中
sources字段：值应为可访问的 HTTP 路径（如["/src/variables.less"]），而非webpack:///./src/variables.less（VS Code 不认这种协议路径） - 对
sources里每个路径，用curl -I http://localhost:8080/src/variables.less测试是否返回 200；出现 404 就说明开发服务器没正确 serve 源文件目录 - Less 4.0+ 编译命令行若用
lessc --source-map-rootpath=/src/，则sources会补全为绝对路径，部署时更稳
Webpack devtool 对 CSS 完全无效
devtool: 'source-map' 或 'eval-source-map' 这类配置，只控制 JS 的 Source Map 行为，对 CSS 编译链路毫无作用。把它当万能开关，是踩坑最频繁的原因之一。
Less → CSS → 最终产物这条链上，less-loader、css-loader、postcss-loader（如有）、MiniCssExtractPlugin 四处的 sourceMap: true 缺一不可。漏掉任意一个，映射就断在那一环，行号必然错位。
真正起效的是 loader 级别的细粒度控制，不是顶层 devtool。复杂点在于每层都得对齐路径和可访问性，而不是单纯“开了就行”。
