3. create-react-app eject后,实现ant-design组件以及组件样式按需加载

背景:

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

推荐阅读更多精彩内容