FontAwesome 5 - $fa-font-path 未考虑在内答案

【问题标题】：FontAwesome 5 - $fa-font-path not taken into accountFontAwesome 5 - $fa-font-path 未考虑在内
【发布时间】：2020-07-27 21:45:21
【问题描述】：

我的 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 值

同样的问题。

【问题讨论】：

标签： sass font-awesome font-awesome-5 parceljs

【解决方案1】：

我最终能够解决这个问题。

这是由于 parcel，默认情况下将 / 而不是 ./ 设置为 CSS 文件的默认公共路径。有很多人抱怨这种行为以及issues referenced in their Github repo。

解决方案

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

--public-url ./

例子：

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

更多详情请见Parcel's Documentation。

【讨论】：