鉴于 antd 官方文档 对使用 babel-plugin-import描述不够清楚，故写此文记录具体配置步骤。
1、npm run eject
在项目根路径下打开命令行，运行
npm run eject
如果使用了git，请确保执行此命令前没有未提交的内容
运行完毕后项目路径下会多出config和scripts文件夹，此外package.json 的内容也会发生改变，其中包括新增的babel节点。
2、修改 package.json 配置
为package.json中的babel节点添加plugins子节点，具体如下
{
// ...
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
}
再次启动项目，此时无需在代码中引入antd/dist/antd.css，按钮也可正常显示
import React, { Component } from "react";
import { Button } from "antd";
// 配置了按需加载就不需要了
// import "antd/dist/antd.css";
class AntdDemo extends Component {
render() {
return (
<div>
<Button type="primary">
Button
</Button>
</div>
);
}
}
export default AntdDemo;
