CODEWITHSUNDEEP
angularsassfonts
bmurauer
bmurauer

Reputation: 1259

Angular rewrites url for external font in scss

We use a Angular app along with the IBM Plex font.

According to the developers of the font, the following configuration must be set in order to correctly load all fonts, which worked fine for Angular 9.

$font-prefix: "../node_modules/@ibm/plex";
@import "@ibm/plex/scss/ibm-plex";

Recently, we upgraded to Angular 10, and now the same configuration leads to the following error:

/path/to/project/node_modules/@ibm/plex/scss/mono/bold/_cyrillic.scss:5:2: 
Can't resolve '../node_modules/@ibm/plex/scss/mono/node_modules/@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Bold-Cyrillic.woff2' 
in '/path/to/project/src'

It seems that the path which can't be found consists of three parts:

I have dug around in the code and the font library uses the following scss to import the font:

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: local('IBM Plex Sans'),
    local('IBMPlexSans'),
    url('#{$font-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
    unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

I checked with a scss @debug statement that the variable $font-prefix actually contains the correct value (../node_modules/@ibm/plex), but it seems that somehow, the path which is passed to the url function is prefixed further (the first part of the above list). The font library did not change, so I assume it has to do something with the way that angular handles scss files? I would very much welcome a hint in which direction I can investigate further

Upvotes: 2

Views: 494

Answers (1)

bmurauer
bmurauer

Reputation: 1259

I managed to fix it by prepending the variable like so:

$font-prefix: '~@ibm/plex';

Unfortunately, I could not find any documentation regarding this bug, and I don't know why this fixes the issue.

Upvotes: 2

Related Questions