create-react-app 中使用ant-design

  ant-design 官方有专门一篇幅来说明如何在create-react-app 中使用,个人觉得篇幅稍微有点大了。如果不考虑易用性的话,ant-design 是不需要配置就可以在create-react-app 使用的。

import Button from 'antd/lib/button';
import 'antd/dist/antd.css';

  美中不足的是,整个ant-design 的样式文件都被引进来了。官方的那篇说明其实就是教我们怎么配置成按需加载对应的样式文件。实现的核心是babel-plugin-import。当然啦,你还需要将create-react-app 的配置解放出来(npm run eject)。接下来直接在package.json 加上babel 的插件配置就可以了。

"plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]

  当然,你要觉得package.json 里面不会管理;也可以直接加到webpack 的配置里。完成配置后,你只需要import 需要使用的组件,其对应的样式文件会自动的引进去。

import { Button } from 'antd';

参考

您的浏览器已过时

要正常浏览本网站请升级您的浏览器。现在升级

×