SourceMap 偏移的根本原因是整条 Loader 链中任意一环未透传或重写映射信息，导致行列号累积漂移；需每层显式开启 sourceMap、统一路径解析、禁用不兼容 devtool 并实测验证。
混合使用多个 Loader（如 sass-loader → postcss-loader → css-loader → MiniCssExtractPlugin）时，SourceMap 偏移的根本原因不是“某个 loader 搞错了”，而是整条转换链中任意一环未透传或重写映射信息，导致行号/列号在逐层转换中累积漂移。关键在于保持映射链完整、路径一致、格式兼容。
每层 Loader 都必须显式开启 sourceMap
Webpack 的 SourceMap 是跨 loader 传递的“上下文”，不是全局开关。漏掉任意一层，映射链就断裂：
- sass-loader：必须设 sourceMap: true，且 implementation 推荐用 dart-sass（node-sass 已弃用，对 sourcemap 支持不完整）
- postcss-loader：若启用（例如 autoprefixer、cssnano），其 options 里也要加 sourceMap: true
- css-loader：必须设 options.sourceMap: true，否则它会丢弃上游传来的 map，只生成空壳或残缺 map
- MiniCssExtractPlugin：本身不生成 map，但会读取前序 loader 的 map 并写入 CSS 文件末尾；需确认它没覆盖或误写 sourceMappingURL
统一路径解析逻辑，避免 sources 路径错乱
最终 .map 文件里的 sources 字段若写的是绝对路径（如 /Users/name/project/src/Button.scss）或错误相对路径，浏览器就找不到源文件。解决方式：
- 在 sass-loader 中设 sourceMapRoot: ''，强制用相对路径解析
- 确保所有 loader 的 output.publicPath 和开发服务器实际托管路径一致（例如 devServer.publicPath 为
/myapp/，则 publicPath 也应设为/myapp/） - MiniCssExtractPlugin 配置中加 publicPath: ''，防止它把 sourceMappingURL 写成
http://localhost:8080/css/app.css.map这类绝对地址
禁用不兼容的 devtool 类型
某些 devtool 值仅作用于 JS 层，对 CSS 完全无效，还会干扰 loader 链：
- 避免使用 eval、cheap-module-eval-source-map 等：它们不生成真实 .map 文件，也不支持 CSS 层映射
- 开发环境推荐 devtool: 'source-map' 或 'inline-source-map'（后者体积大但调试快）
- 生产环境必须用 devtool: 'source-map'，它生成独立 .map 文件，保留完整行列映射，适合精准调试
验证映射是否真正生效
光看配置不够，要实测终端效果：
- 打开浏览器 DevTools → Sources 面板，展开 webpack:// 或 debug/ 目录，确认能看到原始 .scss/.less/.vue 文件结构
- 检查编译后的 CSS 文件末尾是否有
/*# sourceMappingURL=app.css.map */注释，且该 .map 文件能被浏览器成功加载（Network 面板查 200） - 在 Elements 面板点击某条样式，应跳转到对应 .scss 文件的具体行号，而非 data:URL 或 404
