FontAwesome 5 - 未考虑 $fa-font-path

Question

我的 FontAwesome 图标无法使用，因为在构建我的 fontawesome.scss 文件时未考虑 $fa-font-path 变量。

第 1 步：我通过 npm 安装了 FontAwesome 5.13

npm install @fortawesome/fontawesome-free --save

第 2 步：我编辑了 /scss/vendors.scss 文件并添加了以下内容

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";

这些似乎是正确的路径，好像我进行了任何更改但在构建过程中出现错误。

第 3 步：我重新构建了 vendor.css

./node_modules/.bin/parcel build scss/vendor.scss --no-source-maps --out-dir public/css --out-file bundle.css

内部似乎使用了 / 而不是 $fa-font-path 值。

第 4 步：我尝试在 node_modules/@fortawesome/fontawesome-free/scss/_variables.scss

中设置 $fa-font-path 值

同样的问题。

Answer 1

我最终解决了这个问题。

这是由于 parcel，它默认设置 / 而不是 ./ 作为 CSS 的默认 public 路径=] 文件。有很多人抱怨这种行为以及 issues referenced in their Github repo。

解决方案

将以下参数添加到您的构建脚本中：

--public-url ./

示例：

parcel build src/index.html -d public --public-url ./

Parcel's Documentation 中有更多详细信息。

FontAwesome 5 - 未考虑 $fa-font-path

FontAwesome 5 - $fa-font-path not taken into account

sass

font-awesome

font-awesome-5

parceljs