ant design 使用过程中遇到的问题

ant design 使用过程中遇到的问题

npx create-react-app创建项目,执行npm start 出现以下警告信息

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported
 @ ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
 @ ./src/index.js 10:0-28

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not supported
 @ ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
 @ ./src/index.js 10:0-28

WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/locale-provider/style/index.less' URL is not supported
 @ ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
 @ ./src/index.js 10:0-28
Compiled with warnings.

出现这个问题是因为 react-script 升级到5.0.0,通过npx create-react-app 创建的项目,引入antd.css 之后会看到这个警告。
解决方法就是 将 import 'antd/dist/antd.css'; 替换为 import 'antd/dist/antd.min.css';

使用a标签,未设置href属性值出现以下警告

Line 47:11:  The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button 
and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid

解决方法

 <a href="#!"></a>
  • 11
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Ant Design是一个台设计语言,旨在提升用户和设计者的使用体验。它模糊了不同角色之间的边界,将进行UE设计和UI设计的人员统称为设计者,并利用统一的规范进行设计赋能,提高台产品体验和研发效率。\[1\] 在台产品的研发过程,存在不同的设计规范和实现方式,这给设计师和工程师带来了困扰和重复建设的问题,降低了产品的研发效率。为了解决这个问题,蚂蚁金服体验技术部通过项目实践和总结,推出了Ant Design这个台设计语言,旨在统一台项目的前端UI设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源。\[2\] 要开始使用Ant Design,你可以在umi插件集umi-plugin-react配置antd插件,该插件会帮助你引入antd并实现按需编译。Ant Design的组件库是基于React实现的,可以通过npm包进行安装和使用。\[3\] #### 引用[.reference_title] - *1* *2* [Ant Design介绍](https://blog.csdn.net/yueguanyun/article/details/52807993)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Ant Design入门](https://blog.csdn.net/qq_61313896/article/details/128466425)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值