vue饿了么学习笔记(4)icon字体加载问题,提示 These relative modules were not found: ./font/sell-icon.eot...

本文解决了项目中图标字体文件加载失败的问题。通过修改@font-face中URL路径为相对于当前文件的路径,确保了不同环境下资源正确加载。

找不到模块的路径,后在package.json加载了file-loader之后发现还是不行,原来是项目内的路径没有改,自动生成文件时,icon.styl中路径默认为

 src:  url('fonts/sell-icon.eot?2f8f02');
  src:  url('fonts/sell-icon.eot?2f8f02#iefix') format('embedded-opentype'),
    url('onts/sell-icon.ttf?2f8f02') format('truetype'),
    url('fonts/sell-icon.woff?2f8f02') format('woff'),
    url('onts/sell-icon.svg?2f8f02#sell-icon') format('svg')
  font-weight: normal
  font-style: normal

将路径改成当前项目下的路径即可,我的改为:

@font-face 
  font-family: 'sell-icon'
  src:  url('../fonts/sell-icon.eot?2f8f02');
  src:  url('../fonts/sell-icon.eot?2f8f02#iefix') format('embedded-opentype'),
    url('../fonts/sell-icon.ttf?2f8f02') format('truetype'),
    url('../fonts/sell-icon.woff?2f8f02') format('woff'),
    url('../fonts/sell-icon.svg?2f8f02#sell-icon') format('svg')
  font-weight: normal
  font-style: normal

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值