html - 在产品构建中找不到 Font Awesome 相对文件路径

Question

font-awesome 不在产品构建中加载，而是在本地主机中加载。

我正在使用下面的代码

_Variable.scss:

 $fa-font-path: "../webfonts" !default;

solid.scss:

@import "variables";

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

我构建了我的 Angular 元素并运行了 index.html。 字体很棒的图标未加载。它在 C:/驱动器文件夹而不是我的元素构建文件夹中查找？

angular.json 文件:

"architect": {
        "build": {
          "builder": "ngx-build-plus:build",
          "options": {
            "outputPath": "dist/registrationApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/webfonts",
              "src/assets",
              "src/config.json",
              "src/config.local.json"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "stylePreprocessorOptions": {
              "includePaths": ["./src/styles", "./node_modules/bootstrap/scss"]
            },

请指出哪里出了问题？

Answer 1

在angular.json文件中，

找到构建对象并在其中添加webfonts文件夹

喜欢

"build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "build",
        "index": "src/index.html",
        "assets": [
             "src/webfonts"
        ]
}

它会做什么，它会在您的构建中创建一个 assets 文件夹，并在 assets 中添加 webfonts 文件夹。