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

原创于 2018-03-18 16:05:57 发布 · 7k 阅读

2 ·

CC 4.0 BY-SA版权

vue2.0 饿了么专栏收录该内容

25 篇文章

订阅专栏

本文解决了项目中图标字体文件加载失败的问题。通过修改@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