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。