ant按需加載、配置config-overrides.js文件、項目中引入less、解決TypeError: this.getOptions is not a function錯誤

• 安裝antd模塊

npm install antd

• 按需加載需要安裝的模塊：

npm install react-app-rewired customize-cra babel-plugin-import

• 引用less需要安裝的模塊

npm install less less-loader

• 按需加載打包js模塊配置：config-overrides.js

const {override,fixBabelImports,addLessLoader} =require('customize-cra');

module.exports = override(
  // 針對antd 實現按需打包：根據import來打包 (使用babel-plugin-import)
  fixBabelImports('import',{
      libraryName:'antd',
      libraryDirectory:'es',
      style:true,//自動打包相關的樣式 默認為 style:'css'
  }),
  // 使用less-loader對源碼重的less的變量進行重新制定，設置antd自定義主題
  addLessLoader({
      javascriptEnabled: true,
      modifyVars:{'@primary-color':'#1DA57A'},
  })
);

緊接着要修改修改packge.json 的配置文件

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react--app-rewired test",
  "eject": "react-scripts eject"
 },

• 引入自己寫的.less文件到項目中，重新啟動項目，npm run start，可能會報TypeError: this.getOptions is not a function相關的錯誤
  
  原因：這個實際上就是 less-loader 的版本過高，不兼容 getOptions 函數方法，所以需要對 less-loader 進行降級處理
  解決方法：通過 npm uninstall less-loader 命令卸載原版本的 less-loader，然后 通過 npm install less-loader@5.0.0 命令下載降級版本的 less-loader，這個問題就可以解決了