Angular 19库导入字体资源报错：SCSS链接字体构建失败求助

1. 修正SCSS中错误的URL格式 #

你当前的url("../../assets/styles||file:../fonts/")写法不符合CSS/SCSS规范，存在两个核心问题：

• 错误使用||拼接路径，这不是样式文件支持的语法
• 仅指向目录而非具体字体文件，浏览器无法识别并加载资源

正确的@font-face写法示例（假设字体文件为custom-font.ttf，位于库的src/assets/fonts/目录下）：

@font-face {
  font-family: 'CustomFont';
  src: url("../assets/fonts/custom-font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

2. 配置库的资源导出规则 #

确保Angular打包工具能识别并复制字体资源到输出目录：
在库的ng-package.json中添加assets配置：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-library-name",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    "./src/assets/fonts/**"
  ]
}

如果项目使用angular.json管理构建，在库的build.options.assets数组中添加对应路径：

"projects": {
  "your-library-name": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/assets/fonts"
          ]
        }
      }
    }
  }
}

3. 全局SCSS的正确引入方式 #

若要在全局SCSS中统一管理字体：

• 在库的src/styles.scss中定义@font-face规则
• 在ng-package.json中配置全局样式打包：

"styles": [
  "./src/styles.scss"
]

这样使用该库的项目会自动加载全局样式及字体资源。

4. 验证打包结果 #

执行ng build your-library-name后，检查dist/your-library-name目录下是否存在assets/fonts文件夹及对应字体文件；在使用库的项目中运行时，通过浏览器开发者工具的「网络」面板确认字体文件是否能正常加载。

内容的提问来源于stack exchange，提问作者Corentin THIBAUD