babel-plugin-import配置babel按需引入antd模块,编译后报错.bezierEasingMixin()

1,361 阅读1分钟

用create-react-app做项目的时候,同时引入了antd,为了实现按需加载antd模块,用到他们提供的 babel-plugin-import ( 一个用于按需加载组件代码和样式的 babel 插件)

在开始的时候,我们需要使用npm rune ject来将所有的内建的配置暴露出来,这样可以自由重新配置webpack,至于为什么要这样是因为目前create-react-app初始化的项目,并不支持less文件,但是它已经把webpack的一些基础配置也封装起来了。

而antd是基于less开发的,为了更灵活地使用antd甚至是改动一下antd中的less源码,很有必要重新配置一下webpack. 我们可以按照antd中的说明来配置,但是呢,在配置相关的less后,也还是会报.bezierEasingMixin()的错误, 在这里我提供两种方法。

第一种是将less版本降到3.0以下 比如安装 2.7.3版本

yarn add less@^2.7.3
npm install less@^2.7.3 --save

第二种就是不需要降低less版本来配置webpack.config.dev.js和webpack.config.prod.js或者webpack.config.js:

第一步:

第二步,然后在修改getStyleLoaders 中的

第三步,就是在package.json中配置

这就是我写的这两种方法,希望对大家有用,也是我第一次写,多多支持。