webpack 5中的CSS Sourcemap，带有SASS-LOADER，POSTCSS-LOADER和MINICSSEXTRACTPLUGIN

Question

似乎我遵循了所有指令来生成CSS源地图，但仍未在输出CSS中找到它们（我希望看到/ *＃sourcemappingurl = base.css.map */之类的东西。在输出中）。这是我的webpack配置的相关位：

const ENV = process.env;
const scriptDir = path.join(__dirname, 'scripts');

const config = {
  devtool: ENV.WEBPACK_DEVTOOL || 'eval-source-map',

  mode: 'development',

  ...

  module: {
    rules: [
      ...
      {
        test: /\.(scss|sass|css)$/,
        use: [
          // Roll styles into a separate file in /styles folder
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              // There are a bunch of hardcoded paths within CSS that assume we have a URL structure of a Django app. This option makes sure those are not followed during build.
              url: false,
              sourceMap: true,
            },
          },
          {loader: 'postcss-loader', options: {sourceMap: true}},
          {loader: 'sass-loader', options: {sourceMap: true}},
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({filename: '../styles/base.css'}),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(ENV.NODE_ENV),
    }),
  ],
};

if (ENV.NODE_ENV === 'production') {
  config.devtool = 'hidden-source-map';
  config.mode = 'production';
}

if (ENV.WEBPACK_PLUGIN) {
  const Plugin = require(ENV.WEBPACK_PLUGIN);
  config.plugins.push(new Plugin());
}

module.exports = config;