React使用antd按需引入报错
2024-09-08 22:44:53
引言
- 按照
antd
官网配置按需引入,还是出现一系列的报错:
原因
- 当我们使用react-app-rewired配置按需加载,是不能执行yarn eject,暴漏React脚手架webpack的配置文件,否则就会报以上的错误。如果需要暴漏配置文件,可以使用下面这种方式配置按需加载。
使用 babel-plugin-import
- 下载
npm install babel-plugin-import --save-dev 或
yarn add babel-plugin-import
配置package.json文件
- 在babel选项中配置plugins即可,其中style设置为true,就可以为antd定制主题。如果报错,一般都是less过高。需要安装小于3.0.0版本的。yarn add less@2.7.3,安装成功后,再次运行。
"babel": {
"presets": [
"react-app"
],
+ "plugins": [
+ [
+ "import",
+ {
+ "libraryName": "antd",
+ "style": true
+ }
+ ]
+]
}
antd定制主题
- 当把style设置为true之后,运行项目都会重新打包antd的less文件,加载最新的样式文件。在webpack.config.js文件中找到getStyleLoaders()函数,加入以下代码,在modifyVars中定制我们的主题。
最新文章
- [转]教你实践ASP.NET Core Authorization
- C++设计模式-Proxy代理模式
- MySQL数据库的高可用性分析
- quick lua 3.3常用方法和学习技巧之transition.lua
- Windows pyqt4 bat自动转换UI文件-->;.pyw文件
- javascript 定时器使用
- javascript google map circle radius_changed ,angularjs google map circle radius_changed
- DTD验证XML(转)
- 一些有用的javascript实例分析(一)
- App内切换语言
- 201521123093 java 第九周学习总结
- CentOS7.2 使用Shell安装Oracle12c
- ABP跨域调用API时出现的问题
- 盒子模型、IFC、BFC和Collapsing margins
- CF396C On Changing Tree
- 翻译:group_concat()函数(已提交到MariaDB官方手册)
- java,php,js;AES 互通加解密
- SSM项目思路整合NEW
- 廖雪峰Java1-3流程控制-9break、continue
- 【Web】前端裁剪图片,并上传到服务器(Jcrop+canvas)