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

最新推荐文章于 2025-10-07 05:19:52 发布

原创最新推荐文章于 2025-10-07 05:19:52 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

技术同时被 3 个专栏收录

11 篇文章

订阅专栏

bug

3 篇文章

订阅专栏

react

1 篇文章

订阅专栏

项目由 create-react-app 创建，按需加载组件需配置。按官网步骤配置，npm start 报错，原因是 2.0+ 版本弃用该方法。解决办法是安装 npm i customize-cra -D，在 config-overrides.js 中重新导入。使用 less 或 css 也有相应配置方法。

背景：

项目由 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。