Migrating mixin faces for @fontsource/roboto from v5.1.1 to v5.2.5 on Angular App

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".

https://github.com/fontsource/fontsource/blob/main/CHANGELOG.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 ....

Continue reading...