Angular 为 scss 中的外部字体重写 url

Question

我们使用 Angular 应用程序以及 IBM Plex 字体。

根据字体开发者的说法，必须设置以下配置才能正确加载所有字体，这对 Angular 9.

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

最近升级到Angular10，现在同样的配置导致如下错误：

/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'

好像找不到的路径由三部分组成：

../node_modules/@ibm/plex/scss/mono/bold/ <-- 我不知道这是从哪里来的
../node_modules/@ibm/plex <-- 这是 $font-prefix
IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Bold-Cyrillic.woff2 <-- 这是字体文件的剩余路径。

我仔细研究了代码，字体库使用以下 scss 导入字体：

@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;
}

我用 scss @debug 语句检查变量 $font-prefix 实际上包含正确的值 (../node_modules/@ibm/plex)，但似乎不知何故，传递给url 函数有更多前缀（上面列表的第一部分）。字体库没有改变，所以我认为它必须与 angular 处理 scss 文件的方式有关？我非常欢迎提示我可以进一步调查的方向

Answer 1

我设法通过像这样在变量前添加来修复它：

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

遗憾的是，我找不到关于此错误的任何文档，而且我不知道为什么这可以解决此问题。

Angular 为 scss 中的外部字体重写 url

Angular rewrites url for external font in scss

fonts

sass

angular