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

Posted 2023-03-06

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

【英文标题】：How to use local webfont in imported sass file?

【发布时间】：2017-05-15 12:09:45

【问题描述】：

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

源/ 组件/ 菜单/ 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 路径，使其无论从哪里导入都能正常工作？

【问题讨论】：

如果您已经在myfont.scss 上注册了它（假设它以您的webpack/其他方式加载），如果您只使用font-family: myfont; ，它在Menu.scss 上不起作用吗？

不，myfont 还没有在任何地方导入。我在我的 .js 模块文件中导入 scss 文件，我不完全理解普通的 sass（_partials 编译到主 css，并添加了编译 css to html) 与作为反应结构一部分的 sass 相关。这是我的第一个测试项目 :-)

如果您没有文件捆绑器，那么您从中导入的每个 scss 文件都将具有不同的路径，因为它位于项目结构中的不同位置。例如，如果您有一个在 index.js 加载的 scss，那么它可以加载其他将使用我上面写的规则的 scss 文件。

是的，你是对的。还没有看过捆绑器的工作原理

【参考方案1】：

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

base.scss：

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

...

并在每个页面中添加：

@import "base;

【讨论】：

如果我从距离 src 两个目录的地方导入 base.scss，您编写它的方式只会对我有所帮助。如果我在组件/菜单/菜单按钮中有一个 scss 文件，它会再次中断。

但如果我能做到，那么你必须在我包含全局 scss 的任何地方指定字体路径，嗯...

根据您的基本文件和字体文件的位置，更改 $font-path。例如，如果 base.scss 在 Global 文件夹中，您应该将其设为： $font-path: "./fonts" !default;