React 项目结合 Antd 的按需加载不起作用

背景：

项目由 create-react-app 创建的，按照官网的要求，如果按需加载组件，需要加一些配置。我没有通过 .babelrc 或者 babel-loader，而是根据官网的 react-app-rewired

问题：

根据官网的步骤进行配置，当 npm start 的时候就会报错，如图：

The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

报错原因是 2.0+ 版本已经弃用该方法

解决:

这里需要安装 npm i customize-cra -D

然后再 config-overrides.js 中重新导入，如下：

const {
  override,
  fixBabelImports,
  addLessLoader
}  = require('customize-cra')

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: "es",
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true
  })
)

再 npm start 就能正常加载组件而不需要单独引入 css 了。

注：

我用的是 less，如果想用 less， 需要 npm i less less-loader

如果想用 css，只要将 style: true 改成 style: 'css' 即可，不需要引入 addLessLoader。