我正在尝试使用 webpack 将 font-awesome 添加到我的 Next.js 项目中。我已经尝试按照我在网上找到的各种说明（使用文件加载器、url-loader），但没有任何东西对我有用。我暂时放弃了使用 webpack 加载 font-awesome，但我想知道如何实现这一点。目前，我有一个 .scss 文件，用于加载 font-awesome。
内容：
$fa-font-path: "static/fonts";
@import "~font-awesome/scss/font-awesome.scss";
我手动将字体从node_modules/font-awesome/fonts 移动到static/fonts。这很好用，但我想知道 2017 年是否有 webpack 2 的方式来做到这一点。
【问题讨论】：
标签： webpack font-awesome next.js webpack-2
如果您想查看 Next 9 的真实示例，请查看 https://github.com/UnlyEd/next-right-now
有趣的部分是：
免责声明：我是该项目的贡献者
配置：pages/_app.tsx
import { config, library } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { faAngleDown } from '@fortawesome/pro-solid-svg-icons';
// See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks
config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
library.add(
faGithub, faAngleDown
);
您可以通过从正确的存储库导入图标来使用solid/light/etc
用法：组件/Nav.tsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
<FontAwesomeIcon icon={['fab', 'github']} />
编辑 Next.js 10：
虽然上述方法仍然有效，但我现在对 Next.js 10 及更高版本的建议是将您的 Font-Awesome 相关配置拆分为不同的文件，并将该文件导入 _app.tsx。这使得代码更易于维护，仅此而已。
类似：
【讨论】：
_app.tsx。就像在那里完成的那样：github.com/UnlyEd/next-right-now/blob/e6f6258207/src/pages/… 和 github.com/UnlyEd/next-right-now/blob/…
有几种方法可以做到这一点。第一个是通过 next/head 创建一个 head 组件并在那里导入 - 参见here:
另一种方法是创建一个 HOC 来包装您的页面并使用简单的 import 'font-awesome/css/font-awesome.min.css' 导入那里
或者，您可以使用相同类型的导入将其导入您的页面之一。 （不过，我相信这会将其范围限定为该特定页面。请仔细检查我）
希望这会有所帮助。
【讨论】：
Integrating with other tools and frameworks的官方文档请看这里。
您将能够执行以下操作：
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { config, library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
config.autoAddCss = false;
library.add(fas, fab);
return (
<FontAwesomeIcon icon={['fas', 'hat-wizard']} />
<FontAwesomeIcon icon={['fab', 'github']} />
)
或
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAdobe } from '@fortawesome/free-brands-svg-icons/faAdobe';
return (
<FontAwesomeIcon icon={faAdobe} />
)
【讨论】：
纱线添加@fortawesome/fontawesome-free
在 _app.js 中
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';
【讨论】：
这篇文章中没有一个解决方案是关于如何通过 cdn 使用 font-awesome，所以，我将这样做。
有多种方法可以做到，但我通常使用 _app.js 或 _document.js 来完成此类任务。
这是通过 _document.js 实现的
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossOrigin="anonymous"
/>
<script src="https://kit.fontawesome.com/e20sdfsd9.js" crossOrigin="anonymous"></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;这里我只是在下一个应用程序的 DOM 中添加了一个指向 fontawesome 的 css cdn 的链接，该链接将添加到浏览器中呈现的页面中。
要了解更多关于_document.js，请参考here
可以通过我现在不使用的 _app.js 遵循类似的方法，但如果有人需要它，请随意发表评论，我会为你做。
这里是custom app or _app.js的简要介绍
【讨论】：
试试这个
const Hello = () => {
return (
<div>
<Head>
<title>New Title</title>
<meta name="description" content="some description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</Head>
<h1>Hello World <i class="far fa-laugh-beam"></i></h1>
</div>
)
}
export default Hello
请在继续之前安装以下软件包
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
【讨论】：