antd4.x ：create-react-app 中使用antd，按需引入和自定义主题

一、自定义主题

---

1、安装craco

见 antd4.x 官网，以下截自官网：create-react-app 的默认配置进行自定义，这里我们使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案）。现在我们安装 craco 并修改 package.json 里的 scripts 属性。

yarn add @craco/craco

/* package.json */
"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
}

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

/* craco.config.js */
module.exports = {
  // ...
};

2、自定义主题

按照 配置主题 的要求，自定义主题需要用到类似less-loader 提供的 less 变量覆盖功能。我们可以引入 craco-less 来帮助加载 less 样式和修改变量。
首先把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件。

/* src/App.js */
import './App.less';

/* src/App.less */
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，如果看到一个绿色的按钮就说明配置成功了。

二、样式按需引入

在craco.config.js 的基础上，按需引入
首先下载@babel/plugin-proposal-decorators

yarn add @babel/plugin-proposal-decorators

编辑craco.config.js

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': 'oranges' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  /*babel 这里是新增的 */
  babel: {
    plugins: [
        ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true  }],
        ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  }
  /*新增结束*/
};

到这里就可以删掉之前引入的'~antd/dist/antd.less'，实现按需引入了