Why is the style not displayed with ant design

import { Button } from "antd";
import ReactDOM from "react-dom";
import React from "react";
import "antd/dist/antd.css";

ReactDOM.render(
    <div>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="danger">Danger</Button>
    </div>,
    document.getElementById("app"));

webpack.config.js

path = require("path");
HtmlPackagePlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/app.js",
    output: {
        path: path.resolve(__dirname, "./dist/js")
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: "style-loader"},
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1
                        },
                    },
                    {loader: "postcss-loader"}
                ]
            },
            {
                test: /\.html$/,
                use: "html-loader"
            },
            {
                test: /\.tpl$/,
                use: "ejs-loader"
            },
            {
                test: /\.(png|jpg|gif|svg)$/i,
                use: "file-loader"
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader", options: {
                        strictMath: true,
                        noIeCompat: true
                    }
                }]
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: "babel-loader",
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlPackagePlugin({
            filename: "index.html",
            template: "./src/index.html",
            inject: "body",
        })
    ]
};

Why can"t it be displayed

clipboard.png

May.26,2021

. Well, the following things really can't solve the problem. I'm sorry to answer it too casually. The reason should be that css-loader has module: true configured in options , which opens css-module , and enables local scope css by default for all class names and animation names. The way to test is to introduce a self-written css file, in which the style of the class selector will not take effect, and those declared by other selectors can. Refer to the following link for details:
https://webpack.js.org/loader.
https://github.com/css-module.
- I am the split line- -
create a new css file, Then introduce your new css, into your js and add the following code to your new css. But I'm not sure it works for you.
@ import'~ antd/dist/antd.css';


is there anyone?


you need to add such a

to the loader, options of jsx.
{
   test: /\.(js|jsx)$/,
   include: paths.appSrc,
   loader: require.resolve('babel-loader'),
   options: {
   plugins: [
       ['import', { libraryName: 'antd', style: true }],
     ],
  },
},

so that you can load on demand

Menu