React中使用antd按需加载问题解决

最近开始接触React项目，然后自己按照antd文档来创建项目，但是在使用自定义配置按需加载组件时，居然报错了，如下图，就很纳闷了（小朋友的问号脸❓），后面自己终于解决了，记录一下，以防有朋友也遇见类似问题。

屏幕快照 2020-05-07 09.26.21.png

如何出现上述问题

在按照antd文档，配置自定义主题时，重启项目后，就报上面图的错误，步骤都是按照文档来的，文档中也没有提示有这样的错误，所以自己当时就很懵了。

然后就自己网上搜索一下问题，但是大部分看见的都是将配置eject暴露出来，才来更改关于Less Loader的配置或是相关问题的css，style的配置，都不是自己想要的答案，最后也是在stackoverflow上找到了解决问题方案。

出现问题原因

customize-cra的当前版本与create-react-app的最新版本不兼容，准确地说，与css-loader不兼容。尝试安装customize-cra@next以获取alpha版本。

解决方案

1、安装customize-cra@next
2、更改config-overrides.js配置项。(备注：如果不更改，重启项目一样会有提示报错；报错中提示了，只有以下属性是有效的：object { lessOptions?, prependData? appendData? sourceMap? })
3、addLessLoader配置如下

新的配置

// 将原来文档中的属性，放在 lessOptions 中
// theme 是我将主题放在了外部文件来统一修改
addLessLoader({
  lessOptions: {
    javascriptEnabled: true,
    modifyVars: theme
  }
})

最后附上stackoverflows上解决问题地址：https://stackoverflow.com/questions/60946656/how-to-configure-create-react-app-less-module-with-customize-cra2-x?r=SearchResults