CSS sourceMap with sass-loader, postcss-loader, and MiniCssExtractPlugin in Webpack 5

Question

Seems like I've followed all the instructions to generate CSS source maps, but still not finding them in the output CSS (I expect to see something like /*# sourceMappingURL=base.css.map */ in the output). Here are the relevant bits of my Webpack config:

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;