Css Font404

根据以下文档，我将免费添加到我的sass编译中：

我已使用webfont路径更新了_variables.scs：

$fa-font-path:         "../../../node_modules/@fortawesome/fontawesome-free/webfonts" !default;

我正在将相关的scss文件导入我的base.scss：

@import '../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss';

这些在my base.css中编译良好，字体的所有路径似乎都是正确的：

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot");
  src: url("../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
  url("../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2"),
  url("../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff") format("woff"),
  url("../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf") format("truetype"),
  url("../../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}

以下是我的文件结构，显示了相关文件：

|-- Code
    |-- ... Backend ...
    |-- gulpfile.js
    |-- public
    |   |-- .htaccess
    |   |-- index.php
    |   |-- dist
    |   |   |-- css
    |   |       |-- base.css
    |-- src
    |   |-- scss
    |       |-- base.scss
    |-- node_modules
        |-- @fortawesome
            |-- fontawesome-free
                |-- scss
                    |-- _variables.scss
                    |-- fontawesome.scss
                    |-- solid.scss
                |-- webfonts

然而，当我尝试调用模板中的图标时，字体仍然抛出404

<i class="fas fa-envelope"></i>

搜索了其他问题后，我意识到许多人的服务器配置不支持WOFF和WOFF2 MIME类型；然而，如果在这里是这样的话，这个错误将在响应中被明确指出。另外，我已经将它们添加到我的httpd.conf文件中。所以我想我错过了一些明显的东西，需要一些新的眼光

另外，我不想在CDN中使用fontawesome，谢谢