最近开始接触React项目,然后自己按照antd文档来创建项目,但是在使用自定义配置按需加载组件时,居然报错了,如下图,就很纳闷了(小朋友的问号脸❓),后面自己终于解决了,记录一下,以防有朋友也遇见类似问题。
如何出现上述问题
在按照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