Angular 重写 scss 中外部字体的 url答案

【问题标题】：Angular rewrites url for external font in scssAngular 重写 scss 中外部字体的 url
【发布时间】：2021-06-14 14:15:01
【问题描述】：

我们使用 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 文件的方式有关？我非常欢迎提示我可以进一步调查的方向

【问题讨论】：

尝试清空 $font-prefix 变量，看看是否有帮助？

标签： angular sass fonts

【解决方案1】：

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

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

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

【讨论】：