webpack - 如何将Font Awesome添加到Next.js项目

Question

我正在尝试使用webpack在我的Next.js项目中添加超棒的字体。我尝试按照在网上找到的各种说明进行操作（使用文件加载器，URL加载器），但对我没有任何帮助。我暂时放弃了使用webpack加载font-awesome，但是我想知道如何实现这一点。当前，我有一个.scss文件，用于加载超棒的字体。

内容：

$fa-font-path: "static/fonts";
@import "~font-awesome/scss/font-awesome.scss";

我正在手动将字体从 node_modules/font-awesome/fonts移到 static/fonts。这很完美，但是我想知道2017年是否有webpack 2方式可以做到这一点。

Answer 1

有几种方法可以做到这一点。第一个方法是通过next / head创建一个head组件并导入其中-参见here:

另一种方法是创建一个HOC来包装您的页面，并使用简单的import 'font-awesome/css/font-awesome.min.css'导入其中

或者，您也可以使用相同的导入方式将其导入到您的页面之一。 （我相信这会将其范围限制在该特定页面上。仔细检查一下）

希望这可以帮助。