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

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

 

虽然项目一开始是用create-react-app建立，可是以后有 yarn run eject，将全部内建的配置暴露出来，这样能够自由从新配置webpack，至于为何要这样，是由于目前create-react-app初始化的项目

并不支持less文件，可是它已经把webpack的一些基础配置也封装起来了。而antd是基于less开发的，为了更灵活地使用antd甚至是改动一下antd中的less源码，颇有必要从新配置一下webpack.

 

yarn run eject以后，为了实现按需加载，我从新配置了webpack.config.dev.js 固然webpack.config.prod.js也同样

其实只是一个简单的改动：在babel-loader以前插入了一段简单的配置。以下

 1           // Process JS with Babel.
 2           {
 3             test: /\.(js|jsx|mjs)$/,
 4             include: paths.appSrc,
 5             loader: require.resolve('babel-loader'),
 6             options: {
 7 plugins:[ 8 ['import',{libraryName:'antd', style:true}] 9 ], 10               // This is a feature of `babel-loader` for webpack (not Babel itself).
11               // It enables caching results in ./node_modules/.cache/babel-loader/
12               // directory for faster rebuilds.
13               cacheDirectory: true,
14             },
15           },

而后 yarn run start   编译完成后  发现报错了。错误以下：

Failed to compile
./node_modules/antd/lib/button/style/index.less
Module build failed: 

// https://github.com/ant-design/ant-motion/issues/44  
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in C:\Users\HP\Desktop\react-antD\react-antd\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)
This error occurred during the build time and cannot be dismissed.

如何解决这个问题呢？报错信息给了一个连接  https://github.com/ant-design/ant-motion/issues/44

因而打开项目package.json发现less版本是^3.0.4

目前来看，解决方案：将less版本降到3.0如下 好比安装 2.7.3版本。

两种方式：

1.yarn add less@^2.7.3   

2.打开项目的package.json 找到dependencies下面的less 将其版本改成  "2.7.3"   而后 yarn install