Стиль компонентов Ant Design загружается неправильно

Question

Недавно я решил создать свою собственную настройку для реагирования и веб-пакета, поэтому я столкнулся с некоторыми проблемами с библиотеками пользовательского интерфейса, такими как antd или Bulma , когда кнопка импорта компонента похожа на стиль, которого нет.т

это мой index.js

import React from 'react';
import ReactDom from 'react-dom';
import 'antd/dist/antd.css';
import { Button } from 'antd';
import './index.css';

const Index = () => (
     <div>
         <Button type="primary">Primary</Button>
     </div>
  )
;

ReactDom.render(<Index/>,document.getElementById('root'));

и это мой вывод

(Я загрузил изображение на imgur, потому что мне не разрешено загружать изображения в StackOverflow, пока я не получу 10 репутаций)

это мой код настройки веб-пакета

const path= require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    entry:path.resolve(__dirname,'src/index.js'),
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "bundle.js"
    },


    module: {
        rules: [
            {
                test:/\.js$/,
                use:"babel-loader",
                exclude:/node_modules/,
            },

            {
                test:/\.(css|scss)$/,
                use:[
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: true,
                            camelCase: true,
                            localIdentName: '[local]___[hash:base64:5]',
                        },
                    },
                    'sass-loader',
                ]
            },

            {
                test:/\.less/,
                use:[
                    "less-loader",
                ]
            },

            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [
                    'file-loader',
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            bypassOnDebug: true,
                            disable: true
                        }
                    }
                ]
            },

            {
                test:/\.(jpg|png|gif)$/i,
                exclude:/node_modules/,
                use:{
                    loader: "url-loader",
                    options:{
                        limit:8000
                    }
                }

            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname,'src/index.html')
        })
    ]
};