用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

babel-plugin-import配置babel按需引入antd模塊，編譯後報錯.bezierEasingMixin()