引言

在antd4.x的文档中，只提及了如何进行自定义主题，在3.x的文档中提到了可以用react-app-rewired这个包修改react的默认配置的方式配合babel-plugin-import实现按需引用。但是在4.x的文档中，提到了可以用craco这个包来实现。

安装依赖

$ yarn add craco craco-less babel-plugin-import

因为antd是用less写的所以需要craco-less这个包来编译less文件

详细配置

修改启动脚本 package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
}

创建文件 craco.config.js

/*
 * @Author: Mujey 🦦
 * @Date: 2021-08-12 14:44:33
 */
const CracoLessPlugin = require('craco-less')

module.exports = {
  plugins: [
    {
       // 使用CracoLessPlugin自定义主题颜色
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
          // 自定义less变量
            modifyVars: {
              '@primary-color': '#282c34', // 蓝黑色
              '@success-color': '#5ecdc4', // 湖绿色
              '@warning-color': '#6d4cc2', // 紫色
              '@error-color': '#e64a19', // git桔色
            },
            javascriptEnabled: true, // 允许使用js修改less文件，必须为true，否则无法生效
          },
        },
      },
    },
  ],
  // 配置babel-plugin-import按需引用
  babel: {
    plugins: [
      [
        'import',
        {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: true,
        },
      ],
    ],
  },
}

修改 src/App.jsx 添加import './App.less'

import { Row, Col, PageHeader, Card, Avatar, Button, Radio } from 'antd'

import './App.less'

创建less文件 src/App.less

@import '~antd/dist/antd.less';

优化结果

可以看到antd的颜色已经发生了改变，我们再来看看加载的文件大小

优化前打包出的文件大小

这是完整引入ant.css时的打包后文件的大小1.4MB

优化后

文件大小直接小了一半！ 784KB

你学废了吗🤪