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

Question

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

根据字体开发人员的说法，必须设置以下配置才能正确加载所有字体，这在 Angular 9 中运行良好。

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

最近，我们升级到了 Angular 10，现在相同的配置会导致以下错误:

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

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