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

Question

我使用create-react-app创建了一个反应项目，并正在使用此文件夹结构：

• 的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;
}

我得到＆＃34;错误：未找到模块＆＃34;。 如果，为了测试，我将路径更改为src: url('../../Global/fonts/myfont.ttf');，一切正常。

有没有办法设置网址路径，以便无论从何处导入它都可以使用？

Answer 1

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

base.scss：

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

在每个页面中，添加：

@import "base;