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中默認的樣式，若全局修改則用默認的樣式名，若單獨組件中修改，添加樣式名修改