React中按需引入AntD样式

先安装antd：

yarn add antd

再安装相关插件：

yarn add react-app-rewired customize-cra babel-plugin-import

修改项目中package.json文件：

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
);

这样就完成了，修改写法即可：

- import Button from 'antd/es/button';
+ import { Button } from 'antd';