怎样为Webpack的CSS启用Less Source Map

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 源码行号直接丢失，跳转到空白或错位位置。

1. less-loader@6+：用 { loader: 'less-loader', options: { sourceMap: true } }
2. less-loader@7+：同上，但注意 less 本身版本需 ≥4.0，否则 --source-map 行为不兼容
3. 若项目含 @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。

1. css-loader 必须配 { sourceMap: true }，否则它会丢弃 less-loader 传来的原始映射
2. MiniCssExtractPlugin.loader 的 options.publicPath 设为空字符串 ''，让 sourceMappingURL 保持相对路径（如 app.css.map），由浏览器按当前 CSS 文件位置解析
3. 如果用了 postcss-loader（比如加了 autoprefixer 或 px2rem），它的 sourceMap: true 也不能少，否则 PostCSS 处理阶段也会截断映射链

验证 .map 文件是否真能被加载

DevTools 里看不到源文件，往往不是没生成，而是 .map 文件或其中 sources 列表里的路径根本请求不到。别只盯着 Sources 面板，先手动验证 HTTP 层。

1. 打开浏览器开发者工具 → Network 标签页，刷新页面，过滤 css.map，确认该请求返回 200 且响应体是合法 JSON
2. 检查 JSON 中 sources 字段：值应为可访问的 HTTP 路径（如 ["/src/variables.less"]），而非 webpack:///./src/variables.less（VS Code 不认这种协议路径）
3. 对 sources 里每个路径，用 curl -I http://localhost:8080/src/variables.less 测试是否返回 200；出现 404 就说明开发服务器没正确 serve 源文件目录
4. 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。复杂点在于每层都得对齐路径和可访问性，而不是单纯“开了就行”。