引入自定义字体时webpack打包报错

[shiiiiiiji]

今天基于iconfont封装Icon组件的时候，当引入字体样式后，webpack一直报错，如下：

@font-face {font-family: "ytui-icon";
  src: url('./iconfont.eot?t=1531298415150'); /* IE9*/
  src: url('./iconfont.eot?t=1531298415150#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('./iconfont.ttf?t=1531298415150') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('./iconfont.svg?t=1531298415150#ytui-icon') format('svg'); /* iOS 4.1- */
}

ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/Icon/index.scss
    Module not found: Error: Can't resolve './iconfont.eot?t=1531298415150' in 'D:\Dev\yt\Nodejs\npm\YTUI\src\Icon'
     @ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/Icon/index.scss 6:86-127 6:162-203
     @ ./src/Icon/index.scss
     @ ./src/Icon/index.js
     @ ./src/index.js

后来查阅资料时发现webpack不能识别css内的相对路径（js可以），将引用路径改成这样就可以：

@font-face {font-family: "ytui-icon";
  src: url('~/iconfont.eot?t=1531298415150'); /* IE9*/
  src: url('~/iconfont.eot?t=1531298415150#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAqUAAsAAAAAD4AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAAQwAAAFZW7kguY21hcAAAAYAAAACRAAAB9vtUBxpnbHlmAAACFAAABigAAAhwKcmwImhlYWQAAAg8AAAALwAAADYToArbaGhlYQAACGwAAAAeAAAAJAmHBUJobXR4AAAIjAAAABkAAAAsLZ8AAGxvY2EAAAioAAAAGAAAABgKzAy8bWF4cAAACMAAAAAfAAAAIAEaAGBuYW1lAAAI4AAAAU8AAAJ5oPQT1nBvc3QAAAowAAAAYQAAAIRhYKFqeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkUWOcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYKp6JMTf8b2CIYW5gaAAKM4LkAOEtC7EAeJzFkcsRwjAMRJ8TYyDDBMInVVACBXHi7BKoVG2EtZQLFUQzzxrJlu3ZBXZAL54iQ/qQaPFWN3m/Z/B+5qW6KCc6qs3Lorra6FlHtFc8d5rJurmw58DR5wubRdru6f84+fpdK6lCXdEXbQykHnYOmjN2CZo7NgXNNbsGTXO7BdIbuwdSHnsE8gCbA4YfemYcZwAAAHichZVdjBvVFcfvuXfmejxjj2c8M3fs9dieD3uGjZdd44+ZDZt1ApsSFdICjdVsUKISooh+kAKtSBBJ6PaLNhJFoJAH+kKKkBB0eaF55CEvKbT7wlOlqEJJP4RKhehTHqi0s71jJyg0rbCuzhzfjyP9zv/cc5GI0NZfyLukggx0G7oD7UYPIAS0A76K6+BFg3ncAcsTLdtUSRREXi7w58ky2D41WS8ehDbN0RKo0IC+14ujeRzBcDDCS9BjdYBqbWZfue2UyYsgV6LGz9N78WtgNQOnNLo9/ercTrPnGtKJQrlcLZefl6goShgLJRWO2Swv5mWavi6WZqx3m7O4CYVqNLP3QNGtlQ//cvD9etvOA6ytgVFz1Td26jM6H6dmmFGu5rSiVJkpBi0TTvxdqRiFevg3xH8Z63lykRxCVbSAltAetA+hts1M6i9wgsCbh0gfQeI1wNZNSvRBGHg+tXST9bM1vtQAwi33Vcg1AOZhEGfbTZoTMz+j5j55risbTO66D85tXo2GAMMIX+Rfp2GWNneVTLMEa3NdIC88tuPob8bHMD42ntj05YKuFzAqaFohRZm/lhnSlZkhd2sOj0PQNN7m+fn7oQ4Xs2CbqGT6R3c89gKBbvrkjWCZ3Q1aRYOJucqtrnMHITzJw1XyMGpnardZnMTJCPocm2NxuBusNqM5FSzu8DGdD7OdEzeYpCBb4XutKMym/Fx2AD9EKxU5zwI9+V2enPr697ZOPfMSFn9x1+BJAcqWWsBL22YfKXsnFu7YA5MJcAy7JUZHBTjzg+P/PDQ8gLWK175TUR1RaYcfQlGXhIJKTy584yTBZ589nT5y70+E/NuJGTpWhVrfmbvtzhGsLPSf9a1Ww6qUlwJ/Gzm8MP74+FNnMF7dTjSzWmkYomjpvA54CrZ+Kr5JDmYVIUIuDxEW0oU+Fsjr/TJ80N/8jDsIkUmePiT7UQ+N0H18rxUM+xbH5ayJMYImTCshiZltMH4NaJaFZYhRwpBtZbloN2AnxAkJoxxr88pgTWBZChP80IULX3m0dXvNwwGdrT2hfry+/onyw1qHtASv/k03litWHop/fA9KMszZb2y+TAx5vwgBiKcF/AeaOWPZIIaJd7nHHawXKQ8DqOZi7a0rgnB1XRPcxhbiAYvc2fXiA9X3ISeI6WfvVV/98crKa/kCLoIIiIL2/CtAt3gmiliRhydXsrsicPY1AZE1pCCb35SMPkTRlIxOHP6XohxDZDCifcYLwWIcOBuTqgkGI2FSV4MwCgNqBwZPHkaX0yuUgnf5MniUplcub4Aiium1jY30miiCokmFitOKIraa1JpQkhpcN0mjRBgLVNVd1ilRsaQ6i6dhfO3gwbWbI/HITR5h46aIeLc38JuOpeShV13phK7WqjJPZjNqUKnNug5rsTmmNDqB5sG5NDky1fwG93au+heooR8mPXty3ennnP3BiEvMFeUjjmLOGk7TYAwD61bgdO8YTi86akmkcpe5kiaLeIylXIH6rNqQSgBLyWqnHd6lUOl/EOJvnwNPa3UaCuvYLYV52myNtR3FlptVFmpu+GDch1Jhu68vpeqRb/2XjrNo7//XEWhW1oPYjjMtM0bD4l2RhkmYxLyI+ej3rrcEM9O7z5L4SwWFbZou5SBxmULzBdVR7348inkLEwgRSU47tC/i7cxa9mVJqqpuGH6ppM/xqlAV9z6AEjUVNdDb6e/7q6vw9J66XZR1qdj4tWcdtnbMOUVTkWSouVk936xrA+36YhYIi6PBtIFlylLOZmSYgc9Ld5BMtOW6+lNdLcqSXpzcQv6MOwQqUU1Rm6rDm65kLi6Hhq+rValclsKmxamjrx2xZIo5chw9fvct4r4Fe2uKScW8boRZwqT0UsIUVZa0RVvZVuNY3it+YBcr6p6nYXX/da5z5APyBCqjFhogZEyhrl/EcJm3KPGmJ4uj1Xk/ivk7laM+p4u5pL2uCPTSJaAifvVM5WffLdlnL+CHn/oVCB+tr38k4N+ekQvvLPJHKH/grwfy/GW75wKcz7aL6b8vnf3HUO54oqZ35/715+7Gj/gBfuylPwVYz9eHn8omk8djmZly1lf+AywRjK94nGNgZGBgAOIgnfsq8fw2Xxm4WRhA4Hr243wE/b+BdSVzA5DLwcAEEgUAK58LFAB4nGNgZGBgbvjfwBDDuo0BCFhXMjAyoAJuAGWQA9UAAHicY2FgYGB+ycDAwgDBrNsQbHQMADrxAcwAAAAAAAAAAHYA+gF6AY4CDAKIAvADdAPgBDh4nGNgZGBg4GYIYWBlAAEmIOYCQgaG/2A+AwASGgF7AHicbZE7TsNAFEWv80NxBEUQlDANFKA4nwYpJZGSgo4ifeKMnUS2xxqPI3kJrIc1sAJ6OtZAy40zuAjxaJ7Ove/jJw2ALr7g4PBd8R7YQZvqwDWc4cZynf6d5QbZs9xEB0+WW/SfLbt4xIvlDi6x4wSn0aZ6wJtlhzu8W67hAh+W6/Q/LTfI35abuMaP5Ra6zrllF3Pn1nIH907uTrRcGLkSy0JsfJUEKjFuYfJNb69eZZhHC13pCuZSZxuViKE3qLyZTKT+m5XtwpExgQi0isWUQ2UUKZFqtZW+8dbGpON+P7C+56uYq02gIbGAYVxBYImCcQMfCgmCMhrWFYw5/V6Ve2VHSC9itz6R/+/M2aGRUe+VwJDPNDhRN2NdUtYe75XxoUKM6BruJng1O2LS1G4quU9EFkjL3JaOT9/DuuxKMUafJziq98p/x7/PQHE2AHicbcZRCoAgEEXReZVZ1lZcVNiEUTiWCi2/IPrrwIVLFb0M/RtQoUYDhRYaHXoYDBgJ1xhPTs7uIluJKnoJrJxnt2nP05w4d0fhlFcJ5hu71HmN6sku2klIZc9ENxsEGrkAAAA=') format('woff'),
  url('~/iconfont.ttf?t=1531298415150') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('~/iconfont.svg?t=1531298415150#ytui-icon') format('svg'); /* iOS 4.1- */
}

就打包成功了，webpack: Compiled successfully.

---

参考资料：

• Error with Webpack Can't resolve '../fonts/glyphicons maxmx/bootstrap-stylus#129

[Yatoo2018]

webpack: 这锅我不背，请把锅丢给loader

[YunFeng0817]

同样的问题，看了楼主的之后解决了

[shiiiiiiji]

@Mark-Fritz 🤪