Next.js中Flaticon CSS加载失败，Webpack解析HTML文件报错

问题根源 #

你的flaticon.css文件里的@font-face规则存在错误——把Flaticon.html文件当成了SVG格式的字体文件来引用，Webpack尝试解析这个HTML文件时，找不到对应的处理loader，因此抛出Module parse failed: Unexpected token (1:0)错误。

修复步骤 #

1. 打开你的flaticon.css文件，找到包含错误引用的@font-face代码块，通常类似这样：

@font-face {
  font-family: "Flaticon";
  src: url('../fonts/Flaticon.html');
  src: url('../fonts/Flaticon.html#iefix') format('embedded-opentype'),
       url('../fonts/Flaticon.html') format('svg');
}

2. 将所有Flaticon.html的引用替换为正确的SVG字体文件名（一般是Flaticon.svg）：

@font-face {
  font-family: "Flaticon";
  src: url('../fonts/Flaticon.svg');
  src: url('../fonts/Flaticon.svg#iefix') format('embedded-opentype'),
       url('../fonts/Flaticon.svg') format('svg');
}

如果你的字体包中没有SVG格式文件，直接删除对应格式的引用即可，只保留你实际拥有的字体格式（比如woff、woff2）。

3. 确认字体文件（如Flaticon.svg、Flaticon.woff等）确实存在于CSS指定的相对路径下（比如public/assets/fonts/，对应CSS里的../fonts/）。

4. 重启Next.js开发服务器，让Webpack重新解析资源文件。

内容的提问来源于stack exchange，提问作者Manwal