在 Prod 构建中找不到字体真棒相对文件路径答案

【问题标题】：font awesome relative file path not found in Prod build在 Prod 构建中找不到字体真棒相对文件路径
【发布时间】：2020-04-09 13:43:20
【问题描述】：

font-awesome 不在 prod build 中加载，而是在 localhost 中加载。

我正在使用下面的代码

_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:/ drive 文件夹而不是我的项目构建文件夹中查找？

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"]
            },

请提出问题所在？

【问题讨论】：

标签： html css angular font-awesome scss-mixins

【解决方案1】：

在angular.json 文件中，

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

喜欢

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

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

【讨论】：

我添加了“src/webfonts”。 wefonts 文件夹未在 build 文件夹中创建？
你能发布你的angular.json 文件吗？....还要确保 webfonts 文件夹存在于 src 文件夹中
我用我的 Angular json 文件更新代码。并且我的 Angular 项目中没有 webfonts 文件夹
那这是什么？ ../webfonts，我猜这是一个文件夹，你已经给出了相对路径。所以你必须做的是在 src 文件夹中保留一个文件夹的副本，以便在构建 angular cli 时可以将其添加到assets

【解决方案2】：

将你的字体放在 assets 文件夹中并给出引用它的相对路径，这样在构建 webpack 时将完全复制资产文件并修改它的相关路径......

我建议您使用一些部署在云中的 cdn 而不是这个，这样更容易浏览器缓存它。

【讨论】：