react中按需引入antd配置

2019-03-25  本文已影响0人  啥名都不好起

众所周知,react是前端很帅的一个mvc框架,再加上ant design的完美支持,就更显出色,但是想在react中潇洒的使用antd却不是一件容易的事,因为你按照常规的项目架构后,发现antd在用到的时候必须全部引入,而不能按需引入,先不是开发过程中的麻烦,加载时间更是慢的一塌糊涂,所以在antd官网中就提出了如何在react项目中按需引入的方法(Ant Design - A UI Design Language)。但是在如果你天真的跟着官网来配置就会发现,没啥卵用,完了还一大堆错(The "injectBabelPlugin" helper has been deprecated as of v2.0.)。主要因为injectBabelPlugin is not a function,查阅资料发现react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired,react-app-rewired的新版本删除所有方法injectBabelPlugin,这些方法被移动到一个名为'customize-cra'的新包中了。所以,在官网的基础上我们就需要在进行配置修改:

1.确保已经下载customize-cra,less-loader, less

2.修改config-overrides文件为:

然后再重新 npm start就行了

上一篇下一篇

猜你喜欢

热点阅读