webpack 5 默认不生成 css sourcemap，必须显式配置 css-loader、postcss-loader（如使用）及 minicssextractplugin.loader 的 sourcemap: true，并配合 devtool: "source-map" 和正确的 devtoolmodulefilenametemplate 路径映射。
Webpack 5 默认不生成 CSS SourceMap，必须显式配置
Webpack 5 在 mode: "development" 下默认只为 JavaScript 生成 SourceMap（devtool: "eval"），CSS 文件（无论通过 css-loader 还是 MiniCssExtractPlugin）完全不会带映射信息。你看到的样式规则在 DevTools 中显示为 styles.css:1 或 <style></style> 标签内联内容，根本点不到原始 .scss 或 .module.css 文件 —— 这不是浏览器问题，是 Webpack 没配对。
关键点：CSS SourceMap 依赖两层支持 —— css-loader 的 sourceMap 选项，以及输出端（style-loader 或 MiniCssExtractPlugin）的配合。缺一不可。
css-loader 必须开启 sourceMap 且与 devtool 协同
css-loader 是解析 @import、url() 和模块化 CSS 的核心，它负责将 CSS 转成 JS 模块，也负责生成原始 CSS 行号映射。但它的 sourceMap 选项默认为 false，即使 Webpack 的 devtool 是 "source-map" 也无效。
- 在
module.rules中匹配 CSS 的 rule 里，给css-loader显式传入{ sourceMap: true } -
devtool建议设为"source-map"或"inline-source-map"（避免"eval"类型，它不支持 CSS 映射） - 如果用了
postcss-loader，它也要加{ sourceMap: true }，否则 PostCSS 处理后的映射会断掉
示例片段：
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'postcss-loader', options: { sourceMap: true } }
]
}
]
},
devtool: 'source-map'
用 MiniCssExtractPlugin 时要额外处理 HMR 和 output 配置
生产环境或启用 CSS 提取时，你大概率用 MiniCssExtractPlugin 替代 style-loader。但它默认不输出 SourceMap，且开发时热更新（HMR）会破坏映射路径。
- 插件本身不控制 SourceMap，仍靠
css-loader+devtool，但必须确保MiniCssExtractPlugin.loader的options里也设sourceMap: true - Webpack 的
output.devtoolModuleFilenameTemplate可能导致 Chrome 无法定位本地文件（显示为webpack://./src/…却打不开），需加配置修正：
output: {
devtoolModuleFilenameTemplate: ({ resourcePath }) =>
resourcePath.replace(/^.+\/src\//, 'webpack:///')
}
同时，在 rules 中这样写 loader：
{
loader: MiniCssExtractPlugin.loader,
options: { sourceMap: true }
}
常见失效场景和验证方式
即使全配了，也可能因缓存、路径或 loader 执行顺序出问题。最直接的验证方式不是看控制台，而是打开浏览器 DevTools → Elements → 选中元素 → Styles 面板，点击右上角样式来源链接（如 Button.module.css:24），看能否跳转到原始文件并高亮对应行。
- Chrome 显示
webpack://但点不开？检查devtoolModuleFilenameTemplate是否生效，或是否启用了devServer.headers导致 SourceMap 请求被拦截 - SCSS/Sass 中
@import的文件没映射？确认sass-loader也加了{ sourceMap: true }，且放在css-loader之前 - 使用 CSS Modules 时类名混淆干扰调试？SourceMap 依然有效，只是原始文件路径和行号正确即可，类名哈希不影响映射逻辑
CSS SourceMap 不是“开个开关就完事”的功能，它是一条从 loader 输入、经编译链、到最终产物 URL 的完整映射链，任意一环断掉都会让开发者工具回到“盲调”状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
