Webpack中开启CSS Source Map需显式配置各loader的sourceMap: true，包括css-loader、mini-css-extract-plugin和sass/less-loader；Vite需单独启用css.devSourcemap且注意cssCodeSplit影响；验证须检查Network中.css.map响应头及sources路径是否正确。
Webpack 中开启 CSS Source Map 的关键配置
默认情况下，Webpack 的 css-loader 和 mini-css-extract-plugin 都不会生成 CSS Source Map，即使你在 devtool 里设了 source-map。必须显式启用对应 loader 的 sourceMap 选项，否则浏览器开发者工具里点不到原始 SCSS/Less 文件。
实操建议：
-
css-loader必须加{ sourceMap: true }—— 这是解析 CSS 时保留原始位置信息的第一步 -
mini-css-extract-plugin的loader调用中也要传sourceMap: true（它不读 Webpack 全局devtool） - 如果你用
sass-loader或less-loader，它们同样需要sourceMap: true，且需确保implementation是支持 Source Map 的版本（如 Dart Sass）
典型 loader 链示例：
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } }
]
Vite 下 CSS Source Map 默认就生效？别信
Vite 3.0+ 确实默认开启 build.sourcemap，但仅对 JS 生效；CSS 的 Source Map 需要额外确认两件事：是否启用了 css.devSourcemap（开发模式），以及构建时是否用了 build.cssCodeSplit: false（开启后可能拆分 CSS，导致 map 错位）。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 开发时能看到
style.css.map请求成功，但点击跳转显示空白或指向错误行 —— 很可能是sass编译未输出完整路径，需在sassOptions中加sourceMapIncludeContents: true - 生产构建后 CSS map 文件没生成 —— 检查
build.sourcemap是否为true，且没被插件（如vite-plugin-purgecss）提前清掉.map文件
浏览器里点不开原始 CSS 文件？先看 Network 面板
Source Map 生效与否，最直接的验证方式不是看 Elements 面板，而是打开 Network 面板，过滤 .map，确认以下三点都命中：
- 有请求
xxx.css.map，状态码 200 - 响应头包含
Content-Type: application/json - 响应体里
sources字段列的是你写的button.scss、vars.less这类原始路径，而不是/node_modules/...或空数组
如果 sources 是空或路径不对，大概率是 loader 的 sourceMap 没开全，或者构建流程里某步（比如 PostCSS 插件）覆盖/丢弃了 map。
PostCSS 插件会静默破坏 Source Map
像 autoprefixer、postcss-preset-env 这类插件，默认会处理 CSS 并重写 sourcemap，但部分老版本或自定义插件（如手写的 postcss-plugin）若没调用 result.root.source.input.map，就会让 map 断链。
排查方法：
- 临时注释掉
postcss.config.js中所有插件，只留autoprefixer，看 map 是否恢复 - 升级到
postcss8.x + 插件对应新版（如autoprefixer≥10.4） - 若必须用自定义插件，确保它调用
root.source = result.root.source或使用postcss.plugin正确包装
CSS Source Map 的脆弱性在于它依赖整条编译链每个环节的协作，漏掉任意一环的 sourceMap: true 或 map 透传，都会让调试退回到“压缩后 CSS 行号猜谜”状态。
