webpack中加载fontawesome.css报错

发布于 2022-09-02 12:08:09 字数 976 浏览 23 评论 0

require('../node_modules/font-awesome/css/font-awesome.min.css')

报错入下
clipboard.png

Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.

它这里说有非法的字符需要某个loader去解决这个问题

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

是不是无法辨别版本号参数后缀(?v=4.5.0)的原因呢?需要怎样解决这个问题。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

和我恋爱吧 2022-09-09 12:08:09

url-loader没有配置对, 你需要把那些字体的后缀也加到url-loader的配置里面。

检查一下你webpack里面对url-loader的配置。
下面我正在用的配置。

  module: {
    noParse: [],
    loaders: [
      { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}
    ]
  },

注意:大余50KB的文件不会被打包进js里面,会直接输出到output目录。

九公里浅绿 2022-09-09 12:08:09

我也遇到楼主的问题,后来是手动把(?v=4.5.0)这些后缀注释删掉就解决了,直接用这个

{
test: /\.(svg|ttf|eot|woff|woff2)$/,
loader: 'file-loader?name=fonts/[name].[ext]'
  },
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文