背景:
- 需要对项目环境做配置，所以执行了 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文件中会包含所有引用组件的样式。
