Angular项目@fontsource/roboto v5.1.1至v5.2.5迁移的mixin faces问题

问题原因 #

@fontsource-utils的faces mixin默认生成的字体文件路径，在Angular的webpack模块解析规则下，错误地包含了utils自身的目录前缀，导致无法定位到@fontsource-variable/roboto的字体文件。

解决步骤 #

1. 确认依赖版本 #

确保已安装匹配版本的依赖：

npm install @fontsource-utils/scss@^0.2.1 @fontsource-variable/roboto@^5.2.5 --save

2. 修改Styles.scss配置 #

手动指定字体文件的相对路径，修正faces mixin的调用参数：

@use "@fontsource-utils/scss" as fontsource;
@use "@fontsource-variable/roboto/scss" as roboto;

@include fontsource.faces(
  $metadata: roboto.$metadata,
  $styles: normal, italic, // 覆盖原循环的正常/斜体样式需求
  $weights: (100, 300, 400, 500, 700, 900),
  $dir: "../@fontsource-variable/roboto/files" // 直接指向字体文件所在目录
);

3. 验证修复 #

运行Angular项目：

ng serve

检查控制台是否还有文件解析错误，同时确认页面字体是否正常加载。

说明 #

• 原代码的循环逻辑是为每个权重分别加载normal和italic样式，现在通过$styles: normal, italic参数可以一次性实现相同效果，无需循环。
• 指定$dir参数是为了绕过utils mixin默认的路径生成逻辑，让webpack能正确定位到@fontsource-variable/roboto包内的字体文件。

内容的提问来源于stack exchange，提问作者Abdullah El-Kindy