React中配置antd-mobile

安装项目中依赖

npm install antd-mobile --save
npm install react-app-rewired customize-cra --save-dev

package.json中需要修改的地方

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom"
  },

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

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

运行命令

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

安装完后修改config-overrides.js里面的内容

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
     fixBabelImports('import', {
         libraryName: 'antd-mobile',
         style: 'css',
     }),
 );

App.js中更改引用方式

import { Button } from 'antd-mobile';

然后会出现一个

React:'Cannot find module ‘react-scripts/package.json’

这样的报错
解决方案 cmd中运行

npm install react-scripts -S

最后启动项目

npm start