webpack打包字体图标遇到的错误的解决方案

最新推荐文章于 2024-05-08 10:58:00 发布

鸭绒

最新推荐文章于 2024-05-08 10:58:00 发布

阅读量1.7k

点赞数

分类专栏： webpack bug的解决方案文章标签：前端 webpack

本文链接：https://blog.csdn.net/weixin_43334673/article/details/107692763

版权

在使用webpack打包静态网站项目时，遇到无法识别字体图标报错。解决方案是通过引入url-loader，并在webpack配置文件中设置加载器，成功解决了字体图标无法解析的问题。

摘要由CSDN通过智能技术生成

文章目录

- - - 1.引出错误
    - 2.解决方案

1.引出错误

我这个静态网站项目利用了icommon提供的字体图标，直接对该项目进行打包报错。

我在css文件应用“字体图标”：

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

打包报错：

ERROR in ./fonts/icomoon.ttf?raxfuq 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack