文档地址：

antd的基本使用

安装antd

yarn add antd

基本使用

import React, {
          
    Component } from react 
import {
          
    Button } from antd;
import antd/dist/antd.css; // 引入样式

export default class Home extends Component {
          
   
    render() {
          
    
        return (
            <div>
                <Button type="primary">Primary Button</Button> 
            </div>
        )
    }
}

antd样式的按需引入、自定义主题

安装依赖包

yarn add react-app-rewired customize-cra babel-plugin-import less less-loader

修改package.json

"scripts": {
          
   
	"start": "react-app-rewired start",
	"build": "react-app-rewired build",
	"test": "react-app-rewired test",
	"eject": "react-scripts eject"
},

在根目录新建 config-overrides.js 文件

//配置具体的修改规则
const {
          
    override, fixBabelImports,addLessLoader} = require(customize-cra);
module.exports = override(
	// 样式的按需引入
	fixBabelImports(import, {
          
   
		libraryName: antd,
		libraryDirectory: es,
		style: true,
	}),
	// 自定义主题
	 addLessLoader({
          
    
        javascriptEnabled: true,
        modifyVars: {
          
    @primary-color: #1DA57A }
    })
);

备注：不用在组件里亲自引入样式了，即：import antd/dist/antd.css’应该删掉

遇到的问题

解决办法

less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理 通过 yarn remove less-loader 命令卸载原版本的 less-loader，然后 通过 yarn add less-loader@5.0.0安装，问题就解决了。