使用 Yarn 安装 Font Awesome 后如何使用答案

【问题标题】：How to use Font Awesome after it being installed with Yarn使用 Yarn 安装 Font Awesome 后如何使用
【发布时间】：2020-01-10 15:18:57
【问题描述】：

我正在使用 VS 2019 进行 Core 3.1 开发，并使用 Yarn 安装了 Font Awesome：

yarn add @fortawesome/fontawesome-free

但是，当我尝试像这样在我的 HEAD 部分中引用它时：

<script defer src="~/lib/@fortawesome/fontawesome-free/js/all.js"></script>

我收到以下错误：

the 'fortawesome' doesnt exist in actual context

【问题讨论】：

不工作...
您不应该将 Yarn 用于此类用例。请参阅fontawesome.com/how-to-use/on-the-web/setup/… 了解更多详情。
感谢这篇文章，我已经看过这个链接，但是当我引用 ~/lib/@fortawesome/fontawesome-free/js/all.js 时不起作用......我认为它是@有问题但我不确定。纱线获取最新版本你更新！
如果你想通过 HTML 中的脚本标签来引用 FontAwesome，你不能使用 Yarn。您必须使用 CDN 或我之前评论中的链接中提供的预编译 CSS 文件。如果您使用 Yarn 安装 FontAwesome，您还必须使用 WebPack 或其他捆绑器将其转换为您的项目可用的格式。

标签： asp.net-core yarnpkg wwwroot

【解决方案1】：

yarn、npm 等包管理器只需将包添加到您的项目中即可。他们通常还没有准备好直接部署，而是需要一个构建管道来创建实际的 JS/CSS 资源。 @fortawesome/fontawesome repo 是一个例外，因为 1）它实际上不是一个包，并且 2）文件已经“构建”了。即便如此，它们仍然不会出现在正确的位置。

我对 yarn 并不太熟悉，但例如，npm 会将所有内容都放在 node_modules 目录中。该目录默认不提供，也不应该提供，因为它包含“原始”内容。您需要一个单独的构建管道（使用 npm 脚本、webpack、gulp 等）来构建/复制资产到服务的目录（即 wwwroot）。这很可能是您缺少的部分。

为此，由于实际上不需要构建，您只需将资产复制到wwwroot/lib 之类的位置，然后您就可以通过页面上的脚本标签引用它。这可以使用 npm、webpack、gulp、grunt 等任何工具来完成，因此您只需研究并选择最适合您需求的工具。

【讨论】：