After the introduction of @fontsource/roboto v5.2.5, it had some breaking changes including not supporting mixin faces anymore. However, it recommends using 2 other libraries to achieve this.

• "@fontsource-utils/scss": "^0.2.1"
• "@fontsource-variable/roboto": "^5.2.5".

.md#52x

Moreover, my current setup in my Angular project looks as follows:

// Styles.scss

@use "@fontsource/roboto/scss/mixins" as Roboto;

$weights: 400, 500, 700, 900, 300, 100;

@each $weight in $weights {
  @include Roboto.faces($weights: $weight);
  @include Roboto.faces($weights: $weight, $styles: italic);
}

I want to achieve the same using v5.2.5.

To try to achieve it, i followed the steps and installed

• "@fontsource-utils/scss": "^0.2.1"
• "@fontsource-variable/roboto": "^5.2.5".

Then i changed my styles.scss to the following:

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

@include fontsource.faces(
  $metadata: roboto.$metadata,
  $styles: italic,
  $weights: (
    400, 500, 700, 900, 300, 100
  ),
);

While i expect it to work, i get the following errors for multiple woff2 files that can not be resolved

/node_modules/@fontsource-utils/scss/src/mixins.scss:176:3: Can't resolve '../node_modules/@fontsource-utils/scss/src/@fontsource-variable/roboto/files/roboto-cyrillic-ext-wght-italic.woff2' in ....