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

UX诗诗提问于 2026-03-25 13:56:26 阅读 17

工具

我用 Webpack 打包项目时启用了 source map，JS 的能正常定位到源文件，但 CSS 始终显示的是打包后的 bundle.css，根本没法调试原始的 SCSS 文件。我在 devtool 里设的是 ‘source-map’，也确认 style-loader 和 css-loader 都配了 sourceMap: true，可就是没用。

比如这段原始 CSS：

.header {
  background-color: #2c3e50;
  padding: 20px;
  color: white;
}

在浏览器开发者工具里点进去还是 bundle.css 第 1 行，完全看不到 .header 原来在哪个文件里写的，到底哪里漏了？

Loader Plugin 构建工具

我来解答赞 3 收藏

反馈

1 条解答

设计师妍妍 Lv1

遇到这种情况，通常是缺少了对 CSS 提取和处理 source map 的配置。你需要确保在 Webpack 中正确处理 CSS 的 source map。你已经配置了 style-loader 和 css-loader 的 sourceMap 为 true，接下来需要检查是否使用了 mini-css-extract-plugin 来提取 CSS，并且也开启了 source map。

首先，确保你安装了 mini-css-extract-plugin，然后在 Webpack 配置中这样设置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');



module.exports = {

  // 其他配置...

  devtool: 'source-map',

  module: {

    rules: [

      {

        test: /.scss$/,

        use: [

          MiniCssExtractPlugin.loader,

          {

            loader: 'css-loader',

            options: {

              sourceMap: true,

            },

          },

          {

            loader: 'sass-loader',

            options: {

              sourceMap: true,

            },

          },

        ],

      },

    ],

  },

  plugins: [

    new MiniCssExtractPlugin({

      filename: '[name].css',

      chunkFilename: '[id].css',

    }),

  ],

};

这样配置之后，应该就能在浏览器开发者工具中看到 SCSS 源文件了。注意，使用 MiniCssExtractPlugin 会将 CSS 提取到单独的文件中，而不是内联到 JS bundle 中，这通常也是生产环境推荐的做法。

希望这个配置能解决问题，有时候配置细节真是够人喝一壶的。

2026-03-25 14:03