craco库相当于webpack代理，主要作用是不使用eject的情况下配置webpack，并提供一定程度上的封装。

第一步：添加craco库

yarn add @craco/craco

第二步：修改package.json命令行

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

第三步：根目录创建craco.config.js配置文件，到这一步craco配置初步完成

第四步：添加所需库，这里我们需要实现antd自定义主题，cra的craco-antd库虽然是专用于antd，但是一直有个致命bug没有解决，这里我直接使用craco-less库，不用craco-antd。

yarn add craco-less

第五步：修改craco.config.js，启用craco-less

const CracoLessPlugin = require('craco-less')

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
}

第六步：将/src/index.css改名为index.less，修改index.less代码如下

@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less';
@primary-color: #e20909;

第七步：修改/src/index.tsx测试效果

import React from 'react'
import ReactDOM from 'react-dom'
import './index.less'
import reportWebVitals from './reportWebVitals'
import { Button } from 'antd'

ReactDOM.render(
    <React.StrictMode>
        <Button type='primary'>点我</Button>
    </React.StrictMode>,
    document.getElementById('root')
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

 成功