umi 解决找不到antd组件库中组件的路径问题 filePath not found of antd/es/float-button

8 篇文章 0 订阅
3 篇文章 0 订阅

一、问题

常见的报错:
@import ‘~antd/es/style/themes/default.less’;

在安装的依赖中找不到此时正在使用的antd组件库中的悬浮按钮组件

在这里插入图片描述

二、解决方式

我们要知道在umi框架中开发是有自带antd等第三方组件库。
其实最大的原因应该就是你使用最新版本antd@5版本的组件库,而umi中自带的antd组件库是@4版本的,有些组件语法,根本无法互相使用!

第一步、确定目前使用的antd组件库

两种解决方案:

1、把自己安装的antd卸载掉,使用自带的4版本的,去看antd@4组件的官方手册!
2、使用最新版的antd,在 umirc.ts 文件中配置antd:false,酒吧自带的antd@4禁用掉了!

在这里插入图片描述
不设置默认使用自带的antd@4组件库

第二步、删除缓存,重新安装依赖

预防有缓存,把标记红框的删掉,重新yarn或npm,

在这里插入图片描述


小提示:我们在项目开发中最好使用固定的命令要是用yarn就一直都是用yarn ,进行安装依赖。
如果解决了你的问题那么请回来给我个双击哦!

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
如果您在使用 umi4 时引入了 Ant Design 组件库,并且在引入组件路径大小写错误导致编译报错,可以尝试以下解决方案: 1. 确认路径是否正确,并检查大小写是否与实际路径一致。 2. 在 umi4 中,Ant Design 组件库的按需加载插件默认使用了 babel-plugin-import 插件,该插件默认情况下不区分大小写。如果您的组件库中存在大小写不一致的路径,可以通过在 .umirc.ts 或 config/config.ts 中配置 babel 插件来解决问题。 例如,您可以在 .umirc.ts 中添加以下配置: ```js export default { // ... babel: { plugins: [ [ 'import', { libraryName: 'antd', libraryDirectory: 'es', camel2DashComponentName: false, }, 'antd', ], ], }, // ... }; ``` 其中,`camel2DashComponentName` 为 `false` 表示禁用组件名转换,即保持组件名大小写一致。 3. 如果您使用的是 TypeScript,可以在 tsconfig.json 中添加路径别名,以避免路径大小写错误导致编译报错。 例如,您可以在 tsconfig.json 中添加以下配置: ```json { "compilerOptions": { // ... "baseUrl": ".", "paths": { "@ant-design/icons/lib/dist$": ["node_modules/@ant-design/icons/lib/dist/index.js"], "@ant-design/icons/lib$": ["node_modules/@ant-design/icons/lib/index.js"], "@ant-design/icons/lib/components$": ["node_modules/@ant-design/icons/lib/components/index.js"], "@ant-design/icons/lib/icons$": ["node_modules/@ant-design/icons/lib/icons/index.js"], "@ant-design/icons-react$": ["node_modules/@ant-design/icons-react/lib/index.js"], "@ant-design/icons-react/lib$": ["node_modules/@ant-design/icons-react/lib/index.js"], "@ant-design/icons-react/lib/components$": ["node_modules/@ant-design/icons-react/lib/components/index.js"], "@ant-design/icons-react/lib/icons$": ["node_modules/@ant-design/icons-react/lib/icons/index.js"], "@ant-design/react-native$": ["node_modules/@ant-design/react-native/lib/index.js"], "@ant-design/react-native/lib$": ["node_modules/@ant-design/react-native/lib/index.js"], "@ant-design/react-native/lib/components$": ["node_modules/@ant-design/react-native/lib/components/index.js"], "@ant-design/react-native/lib/style$": ["node_modules/@ant-design/react-native/lib/style/index.js"], "@ant-design/react-native/lib/utils$": ["node_modules/@ant-design/react-native/lib/utils/index.js"] } } } ``` 这样,您就可以在代码中使用路径别名来引入 Ant Design 组件,避免大小写错误导致编译报错。 希望以上解决方案对您有所帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

范德萨_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值