真理是一步步探索来的--字体IcoMoon踩坑记

字体的引用非常简单，但是没想到被一处小bug困扰了半天。。

image.png

网上搜了半天，很快找到解决方法1，使用绝对路径;

image.png

然而继续报错：

image.png

风中凌乱了。。。。

苦苦百度，被带入了各种各样的坑，不断尝试，然后找到了这个

https://github.com/webpack/webpack/issues/1468

image.png

在webpack.dev.js中添加下面代码：

module: {
        rules: [
                { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
                { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
        ]
}

ps：路径要用相对路径，否则走不出这个坑！！！

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?krwqg');
  src:  url('../fonts/icomoon.eot?6394vp#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?6394vp') format('truetype'),
    url('../fonts/icomoon.woff?6394vp') format('woff'),
    url('../fonts/icomoon.svg?6394vp#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}