css - 如何在导入的 sass 文件中使用本地 webfont？

我使用 create-react-app 创建了一个 react 元素，并且正在使用以下文件夹结构:

src/

组件/

菜单/

Menu.scss

全局/

字体/

myfont.ttf

等等...

myfont.scss

在 Menu.scss 中，我使用 @import '../../Global/myfont'; 导入。

在 myfont.scss 中，我包含了字体:

@font-face {
  font-family: 'myfont';
  src: url('./fonts/myfont.ttf');
  ...
  font-weight: normal;
  font-style:  normal;
}

我收到“错误:找不到模块”。
如果为了测试，我将路径更改为 src: url('../../Global/fonts/myfont.ttf'); ，则一切正常。

有没有办法设置 URL 路径，以便无论从何处导入它都能正常工作？

最佳答案

我建议您制作一个“基本”scss 文件，您可以在其中编写/导入您的字体、图标和其他网站范围的组件，例如页眉、页脚等。然后在您的每个页面的 css 中导入该 base.scss 文件。

基础.scss:

$font-path: "../../Global/fonts" !default;
@font-face{
  src: url('#{$font-path}/myfont.ttf');
   ...
}
...

并在每个页面中添加:

@import "base;

关于css - 如何在导入的 sass 文件中使用本地 webfont？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41408976/