无法使用Fontsource Roboto的face mixins（v5.2.5版本问题）

问题情况 #

在使用@fontsource/roboto v5.2.5版本时，按照官方文档推荐的方式，通过@fontsource-utils/scss和@fontsource-variable/roboto调用fontsource.faces混入来引入Roboto字体，结果完全没效果。但直接用@use "@fontsource/roboto";引入完整CSS文件时，字体就能正常加载。测试项目的src/styles.scss已经试过mixins的写法，但就是不生效，把直接引入的语句取消注释就正常了。

原因分析 #

@fontsource-variable/roboto在v5.2.5版本的SCSS模块中，大概率存在混入定义不完整或者字体文件路径引用错误的问题，导致fontsource.faces无法正确生成字体的@face规则。而直接引入的@fontsource/roboto CSS是官方预编译好的完整样式规则，不存在这些依赖或引用问题。

修复方案 #

方案1：调整依赖版本或使用官方SCSS入口 #

如果需要继续使用SCSS mixins方案，可以尝试：

• 将@fontsource-variable/roboto和@fontsource-utils/scss降级到v5.2.0及以下版本（经测试该版本的mixins功能正常）
• 或者直接使用@fontsource/roboto自带的SCSS入口调用mixins：

  @use "@fontsource/roboto/scss" as roboto;
  @include roboto.faces();
  

方案2：保留直接引入方式（最稳定省心） #

如果不需要自定义字体的权重、格式等参数，直接保留@use "@fontsource/roboto";的引入方式即可。这是官方预编译的完整样式，兼容性和稳定性最优，适合大多数场景。

方案3：手动补全mixins参数 #

如果必须使用variable版本的mixins，可以手动指定字体文件的路径等关键参数，确保fontsource.faces能正确找到字体文件：

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

@include fontsource.faces(
  $family: "Roboto Variable",
  $weights: [300, 400, 500, 700],
  $styles: ["normal"],
  $formats: ["woff2"],
  $dir: "../node_modules/@fontsource-variable/roboto/files"
);

验证修复 #

将上述任一方案应用到项目的src/styles.scss中，运行项目后，通过浏览器开发者工具的「字体」面板检查页面是否成功加载并应用了Roboto字体。

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