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

Question

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编译时报错信息

Answer 1

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

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

Answer 2

阿里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;
}

Answer 3

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

Answer 4

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