Webpack 打包后 CSS Source Map 为啥不生效？

东方曦月提问于 2026-02-25 10:21:22 阅读 25

工具

我用 Webpack 打包项目，启用了 source map，JS 的能正常定位到源码，但 CSS 始终显示的是打包后的 bundle.css，没法跳回原始的 .scss 文件。我在开发环境里配置了 devtool: ‘source-map’，也给 MiniCssExtractPlugin 加了 sourceMap: true，但还是不行。

我的 CSS 是这样写的：

.header {
  background-color: #333;
  padding: 1rem;
  color: white;
}

浏览器开发者工具里点进去还是 bundle.css，这到底是哪儿没配对？

Webpack

我来解答赞 6 收藏

反馈

1 条解答

シ俊贺 Lv1

你这配置其实差了关键一步，Webpack 的 CSS source map 要生效，得同时满足三个条件：CSS loader 开了 sourceMap、MiniCssExtractPlugin 开了 sourceMap，还有最重要的——CSS 要走 extract 流程前已经被正确处理成带 source map 的中间产物。

你用了 MiniCssExtractPlugin，那得确认 mini-css-extract-plugin 的版本是不是 ≥ 1.6.0，老版本对 source map 支持有坑。另外 css-loader 的 sourceMap 选项要显式设为 true，别光依赖默认值，因为很多 loader chain 里默认是关的。

典型配置长这样：

module: {

  rules: [

    {

      test: .scss$/,

      use: [

        MiniCssExtractPlugin.loader,

        {

          loader: 'css-loader',

          options: {

            sourceMap: true,

            importLoaders: 2,

          },

        },

        {

          loader: 'sass-loader',

          options: {

            sourceMap: true,

          },

        },

      ],

    },

  ],

},

plugins: [

  new MiniCssExtractPlugin({

    filename: '[name].css',

    chunkFilename: '[id].css',

    sourceMap: true,

  }),

],

devtool: 'source-map',

注意 css-loader 和 sass-loader 都得显式开 sourceMap: true，而且顺序不能乱——loader 是从右到左执行的，source map 信息得一层层往下传。

要是你用的是 Webpack 5 + 新版 loader，还建议确认下 devServer.devtoolModuleFilenameTemplate 没被改过，有些脚手架会偷偷覆盖这个导致 source map 映射错位。

最后提醒一句：Chrome 开发者工具里得在「Sources」面板右上角那个齿轮设置里确认「Enable CSS source maps」是勾上的，这个坑我踩过两次……

2026-02-25 11:03