[TOC] [开发文档](https://ant.design/components/button-cn/) ### 1. 先安装`antd`和`babel-plugin-import`： ~~~ npm install antd babel-plugin-import --save 或者 yarn add antd babel-plugin-import ~~~ `babel-plugin-import`也可以通过`-D`参数安装到`devDependencies`中，它用于实现按需加载。 ### 2. 然后在`.webpackrc`中添加如下配置： ~~~ { "extraBabelPlugins": [ ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }] ]} ~~~ ### 3. 使用 ~~~ 现在就可以按需引入 antd 的组件了，如import { Button } from 'antd'，Button 组件的样式文件也会自动帮你引入。 ~~~ 更多`.webpackrc`的配置请参考[roadhog 配置](https://github.com/sorrycc/roadhog/blob/master/README_zh-cn.md#%E9%85%8D%E7%BD%AE)。 ### 4. [](https://pengtikui.cn/dva.js-get-started/#%E8%87%AA%E5%AE%9A%E4%B9%89-antd-%E4%B8%BB%E9%A2%98 "自定义 antd 主题")自定义 antd 主题 可以在`.webpackrc`中添加`theme`字段直接进行主题自定义，但是如果自定义的变量太多，建议将其单独提取取来方便管理。 建议在`./src`目录下新建名为`theme.js`的文件，然后在`.webpackrc`中引入，如下： ~~~ { "theme": "./src/theme.js"} ~~~ `theme.js`示例如下： ~~~ export default { "primary-color": "#000",} ~~~ 更多可自定义的 antd 变量请参考[default.less](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)。