用ant design为啥样式没有显示出来

Question

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',
        })
    ]
};

为什么显示不出来

Answer 1

...好吧，下面的东西确实不能解决问题，很抱歉答的太随意，原因应该是css-loader在options中配置了module： true的问题，这样会开启css-module，会默认对所有的类名与动画名启用局部作用域css。测试的方法是引入自己写的css文件，其中类选择器的样式不会生效，通过其他选择器声明的可以生效。详细参考下面的链接：
https://webpack.js.org/loader...
https://github.com/css-module...
--------------------我是分割线-------------------------
新建一个css文件，然后在你的js中引入你新建的css，在你新建的css中加入下面的代码。。。但是我不确定对你有没有用。
@import '~antd/dist/antd.css';

Answer 2

有人吗☺。。。

Answer 3

需要在jsx的loader, options中添加这样的

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

这样才能按需加载