css-loader 和 webpack 导致在构建的代码样式名称中可用 .default 属性

问：

我在 webpack 中使用 css-loader 有问题。我有一个正常的配置（标准webpack配置文件，带有ts-loader，css-loader），构建成功后，这不起作用：

import * as css from "./AppLogoStyles.css";
...
<AppMainLogo className={css.logo} />

因为在构建的文件中，它是隐藏在 中，而不是 中。css.default.logocss.logo

我有这个tsconfig

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "declaration": true,
    "jsx": "react",
    "skipLibCheck": true,
    "strictNullChecks": true
  }
}

Webpack 配置

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

module.exports = {
    mode: "development",
    entry: './src/index.ts',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [new MiniCssExtractPlugin()],
    module:{
        rules: [
            {
                test:/\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            modules: "global",
                        },
                    },
                ]
            },
            {
                test:/\.ts$/,
                use:['ts-loader']
            }
        ]
    },
};

有人知道为什么会有这样的行为？Starnge 是我从旧版本进行了一些升级，它在 webpack4 中工作正常，但在 webpack5 中不起作用。