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