关于react引入antd-mobile的injectBabelPlugin报错问题

最新推荐文章于 2025-05-23 11:36:31 发布

原创最新推荐文章于 2025-05-23 11:36:31 发布 · 786 阅读

1 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Create React App创建项目，并通过定制配置引入Ant Design。详细步骤包括安装依赖、配置按需加载组件及样式、调整构建脚本等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建项目
npm i -g create-react-app
create-react-app 名称
cd 名称
引入antd
npm add antd
npm add react-app-rewired -D

改变package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

npm install babel-plugin-import --save-dev

使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

+ const { injectBabelPlugin } = require('react-app-rewired');
  module.exports = function override(config, env) {
+   config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
    return config;
  };

因为injectBabelPlugin在react-app-rewired 2.0+的时候被删除了

2.0版删除了重新连接辅助函数

所有帮助函数：

injectBabelPlugin
compose
getBabelLoader
getLoader
babelLoaderMatcher
loaderNameMatches

解决，npm install customize-cra --save-dev

//config-overrides.js进行修改如下

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


module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd-mobile", libraryDirectory: "es", style: true // change importing css to less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

因为用的是style:true
所以还需要安装npm i -D less less-loader