3. create-react-app eject后，实现ant

背景:

• 需要对项目环境做配置，所以执行了 eject
• 需要修改antd组件的样式，不仅仅修改antd的主题色，所以把antd的样式文件从node_modules中提取了出来，用于修改 ,但antd推荐的按需加载的插件babel-plugin-import不能修改样式文件路径
• 参考了vue组件库element-ui实现按需加载的思路，使用babel-plugin-component实现，既可以按需加载组件，还可以指定自定义样式文件路径

1. 下载babel-plugin-component

npm i babel-plugin-component -D

2. copy antd样式文件到src中

• 把下载的antd资源包中的lib文件夹copy一份，到src中并重命名（文件位置以及重命名名称自定义，本人放在src/下，并命名为 ant-design）

3. 修改babel配置

修改babel配置

• name 为自定义样式文件夹的路径
• path 为组件文件夹中css文件的路径
• base 是否加载基础css，默认为base.css，所以copy一份antd的基础css（antd/style/index.css）到src/ant-design下

4. 测试

import { Button } from "antd"
// ====>>>
// var button = require('components/lib/button')
// require('src/ant-design/button/style/index.css')

就可以使用组件，并同时加载了相应组件自定义的css样式

5. 相应问题

antd组件的css文件中，只包含本组件的样式，比如table组件中会引用到pagination组件，但import { Button } from "antd"后并没有引入pagination的样式，就会出现问题。
对比而言，element-ui中，组件css文件中会包含所有引用组件的样式。