用的是create-react-app创建的react项目。首先需要yarn run eject弹出webpack的配置文件。
按需加载
yarn add antd babel-plugin-import -D
先安装antd以及借助babel-plugin-import 插件实现按需加载，安装后修改package.json文件中的babel项目（也可以通过单独的.babelrc文件配置）
在plugins中配置如下：
[ "import", { "libraryName": "antd", "libraryDirectory": "es", "style": true } ],然后重新启动就可以了
yarn start #重启
然后在页面 测试
import { Button } from 'antd'
<Button type='primary'>Primary</Button>看到如下有样式的按钮表示成功：
修改主题颜色
因为antd中的样式是用less写的，首先需要安装处理less的包
yarn add less less-loader -D
打开config/webpack.config.js文件：
在module中的rules中项的末尾中添加处理less文件的loader：
通过less的modifyVars项覆盖初始样式：
{
test: /\.less$/, //include: paths.appSrc,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS }, {
loader: "less-loader",// compiles Less to CSS
options: {
sourceMap: true,
modifyVars: {
'primary-color': '#FF704F',
'link-color': '#FF704F', // 'border-radius-base': '2px', },
javascriptEnabled: true,
}
}]
}
然后 yarn start 重启即可
【补充】在antd中可以修改的常用的通用变量，所有样式变量可以在 这里 找到。
