H5W3
当前位置:H5W3 > 其他技术问题 > 正文

webpack引入阿里iconfont字体图标失败

webpack引入阿里iconfont字体图标失败,不知道如何处理该问题。

配置如下:

{ 
    test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, 
    loader: 'url-loader?limit=8192'
}

scss文件如下:

@font-face {
    font-family: "iconfont";
    src: url("./fonts/iconfont.eot?t=1507651218428"); /* IE9*/
    src: url("./fonts/iconfont.eot?t=1507651218428#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("iconfont.woff?t=1507651218428") format("woff"), /* chrome, firefox */
    url("./fonts/iconfont.ttf?t=1507651218428") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url("./fonts/iconfont.svg?t=1507651218428#iconfont") format("svg"); /* iOS 4.1- */
}

webpack编译时报错信息

clipboard.png

回答:

./fonts/iconfont.eot?t=1507651218428 => ./fonts/iconfont.eot

去掉问号后面的,下面也都一样。

回答:

阿里iconfont的东西,直接用他们CDN的在线地址更好吧


感觉应该是你的字体文件的路径引用不对吧,试试更改一下路径,多加一层两层看看,我的项目也是用的webpack+iconfont,配置正确的话不会有问题的


$eotPath: '../icons/icomoon.eot?sirizn';
$ttfPath: '../icons/icomoon.ttf?sirizn';

@font-face {
  font-family: 'icomoon';
  src: url($eotPath);
  src: url($ttfPath) format('truetype');
  font-weight: normal;
  font-style: normal;
}

回答:

引用的图标地址是以你当前的.vue文件的相对位置

clipboard.png

clipboard.png

回答:

是路径解析的问题,相对路径会出错,使用绝对路径吧 url(“/src/common/fonts/**”)

本文地址:H5W3 » webpack引入阿里iconfont字体图标失败

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址