react中使用ant-design步骤

step1、 npm install antd --save

step2、npm install babel-plugin-import --save-dev

step3、分别在config/webpack.config.dev.js、config/webpack.config.prod.js中配置

https://github.com/ant-design/babel-plugin-import

plugins: [
    ["import", { libraryName: "antd", style: "css" }]
    //["import", { libraryName: "antd", style: true }] // style:true表示采用的是less
]

webpack.config.dev.js中配置方式如下：
oneOf: [
       ......
    // Process JS with Babel.
    {
        test: /\.(js|jsx|mjs)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
            cacheDirectory: true,
            plugins: [
                ["import", { libraryName: "antd", style: "css" }]
                //["import", { libraryName: "antd", style: true }] // style:true表示采用的是less
            ]
        },
    }
    ......
]

webpack.config.prod.js中配置方式如下：
oneOf: [
       ......
    // Process JS with Babel.
    {
        test: /\.(js|jsx|mjs)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
            compact: true,
            plugins: [
                ["import", { libraryName: "antd", style: "css" }]
                //["import", { libraryName: "antd", style: true }] // style:true表示采用的是less
            ]
        },
    }
    ......
]

step4、在组件中直接引入anti-design中的组件即可，例如：import { Button } from "antd";
注：若要修改anti-design中默认的样式，若全局修改则用默认的样式名，若单独组件中修改，添加样式名修改