安装依赖

// 全局安装 create-react-app，因为要经常使用yarn global add create-react-app 
复制代码

创建项目并安装依赖

yarn create react-app react-antd

cd react-antd// 在 react-antd 项目中安装 antdyarn add antd -S复制代码

自定义 create-react-app 的默认配置

当需要对create-react-app 的默认配置进行自定义时，antd@4.x版本推荐使用 craco（一个对 create-react-app 进行自定义配置的社区解决方案）

现在我们安装 craco 并修改 package.json 里的 scripts 属性。

 yarn add @craco/craco复制代码
/* package.json */"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}复制代码

然后在项目根目录创建一个craco.config.js 用于修改默认配置。

/* craco.config.js */module.exports = {  // ...};复制代码

定制主题色并在项目中使用 less

按照 配置主题 的要求，自定义主题需要用到类似 less-loader 提供的 less 变量覆盖功能。我们可以引入 craco-less 来帮助加载 less 样式和修改变量。

首先把src/App.css文件修改为 src/App.less，然后修改样式引用为 less 文件。

/* src/App.js */- import './App.css';
+ import './App.less';复制代码
/* src/App.less */- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';复制代码

然后安装craco-less并修改 craco.config.js 文件如下。

 yarn add craco-less复制代码
const CracoLessPlugin = require('craco-less');module.exports = {  plugins: [
    {      plugin: CracoLessPlugin,      options: {lessLoaderOptions: {          lessOptions: {modifyVars: { '@primary-color': '#1DA57A' },javascriptEnabled: true,
          },
        },
      },
    },
  ],
};复制代码

这里利用了 less-loader 的 modifyVars 来进行主题配置，变量和其他配置方式可以参考 配置主题 文档。修改后重启 yarn start，如果看到一个绿色的按钮就说明配置成功了。

antd 内建了深色主题和紧凑主题，你可以参照 使用暗色主题和紧凑主题 进行接入。

同样，你可以使用 react-app-rewired 和 customize-cra 来自定义 create-react-app 的 webpack 配置。

按需导入 antd 组件样式

实际项目中，为了缩小打包后的体积，往往需要用到按需加载，步骤如下：安装依赖 babel-plugin-import

yarn add babel-plugin-import复制代码

然后在craco.config.js里加上

babel: {     plugins: [
        ["import", 
            {"libraryName": "antd","libraryDirectory": "es",                 "style": true //设置为true即是less }
         ]
     ]
},复制代码

以上配置完成后，在引用组件时，无需在额外引入样式文件，babel 会自动按需帮你完成样式的引入