Angular 17库构建失败：无法解析node_modules字体资源路径

项目场景 #

使用Angular 17构建可复用组件库my-lib，依赖node_modules/@design-system提供样式变量和字体资源，本地运行正常，但执行ng build my-lib时报错无法解析字体文件路径。

目录结构 #

node_modules/
└── @design-system/
    ├── assets/
    │   └── fonts/
    │       └── Poppins/
    │           └── woff2/
    ├── css/
    │   └── design-system.css
    └── src/
        ├── _variables.scss
        └── fonts/
            └── _poppins.scss

projects/
└── my-lib/
    ├── components/
    │   └── button/
    └── ng-package.json

src/
angular.json
package.json

相关文件内容 #

@design-system/src/_variables.scss #

@import './fonts/poppins';
@import './fonts/opensans';

/* Grey shades */
$gray-2: #fafafa !default;
$gray-4: #f5f5f5 !default;
$gray-8: #ebebeb !default;
$gray-10: #e6e6e6 !default;
$gray-20: #cccccc !default;
$gray-30: #b3b3b3 !default;
$gray-40: #999999 !default;
$gray-70: #4d4d4d !default;
$gray-90: #1a1a1a !default;

@design-system/src/fonts/_poppins.scss #

@font-face {
   font-display: swap;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 100;
   src: url("../assets/fonts/Poppins/woff2/Poppins-100-normal-latin-ext.woff2") format('woff2'), url("../assets/fonts/Poppins/ttf/Poppins-100-normal.ttf") format('ttf');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
   font-display: swap;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 200;
   src: url("../assets/fonts/Poppins/woff2/Poppins-200-normal-latin-ext.woff2") format('woff2'), url("../assets/fonts/Poppins/ttf/Poppins-200-normal.ttf") format('ttf');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

button.scss #

@use "@design-system/src/variables" as v;

h2 {
  color: v.$gray-70;
}

错误信息 #

✖ Compiling with Angular sources in Ivy partial compilation mode.
Build failed with 71 errors:
<stdin>:8:11: ERROR: [plugin: angular-css-resource] Could not resolve "../assets/fonts/Poppins/woff2/Poppins-100-normal-latin-ext.woff2"

解决方案 #

方案1：调整@design-system中的字体引用路径 #

在@design-system/src/_variables.scss中定义基于包的绝对路径变量，统一字体引用逻辑：

// 定义字体资源的根路径
$font-asset-base: '@design-system/assets/fonts/' !default;

@import './fonts/poppins';
@import './fonts/opensans';

/* Grey shades */
$gray-2: #fafafa !default;
// ... 其余颜色变量

修改@design-system/src/fonts/_poppins.scss，使用变量拼接路径：

@font-face {
   font-display: swap;
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 100;
   src: url("#{$font-asset-base}Poppins/woff2/Poppins-100-normal-latin-ext.woff2") format('woff2'), url("#{$font-asset-base}Poppins/ttf/Poppins-100-normal.ttf") format('ttf');
   unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
// ... 其余字体声明

方案2：配置ng-packagr复制字体资源到组件库产物 #

修改projects/my-lib/ng-package.json，添加assets配置，将@design-system的字体资源复制到组件库构建目录：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/my-lib",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    {
      "glob": "**/*.woff2",
      "input": "../../node_modules/@design-system/assets/fonts",
      "output": "./assets/fonts"
    },
    {
      "glob": "**/*.ttf",
      "input": "../../node_modules/@design-system/assets/fonts",
      "output": "./assets/fonts"
    }
  ]
}

此时_poppins.scss中的原有相对路径会指向组件库自身的assets目录，无需额外修改。

方案3：配置Angular样式预处理器路径 #

在angular.json的projects.my-lib.build.options中添加stylePreprocessorOptions，让Scss能直接解析@design-system的源码路径：

"projects": {
  "my-lib": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:ng-packagr",
        "options": {
          "tsConfig": "projects/my-lib/tsconfig.lib.json",
          "project": "projects/my-lib/ng-package.json",
          "stylePreprocessorOptions": {
            "includePaths": [
              "./node_modules/@design-system/src"
            ]
          }
        }
      }
    }
  }
}

同时简化button.scss的引用：

@use "variables" as v;

h2 {
  color: v.$gray-70;
}

内容的提问来源于stack exchange，提问作者Liam Scott