[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)。