下载依赖包
npm install babel-plugin-import --save-dev
npm install react-app-rewired --save-dev
修改package.json文件
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
在项目根目录下面添加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;
};
重启项目,报错了,错误如下
npm run 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
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! appnfc@0.1.0 start: react-app-rewired start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the appnfc@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
进到这里https://github.com/arackaf/customize-cra#available-plugins
,就看到一句话:Override webpack configurations for create-react-app 2.0,react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired,react-app-rewired的新版本删除所有方法injectBabelPlugin,这些方法被移动到一个名为’customize-cra’的新包中了
所以现在你可以开始下载这个包还有less,less-loader了
下载customize-cra
npm install customize-cra --save-dev
修改config-overrides.js 文件,文件内容:
const { override, fixBabelImports } = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd-mobile",
style: "css",
})
);