create-react-app 中使用 antd@4.x

安装依赖

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

创建项目并安装依赖

yarn create react-app react-antd

cd react-antd

// 在 react-antd 项目中安装 antd
yarn 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 内建了深色主题和紧凑主题，你可以参照 使用暗色主题和紧凑主题 进行接入。

按需导入 antd 组件样式

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

yarn add babel-plugin-import

然后在craco.config.js里加上

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

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