不能使用@font-face SCSS 本地文件夹

Question

我有两个“ttf”字体文件，我必须与 Sass 一起使用 - SCSS，我不能直接从文件夹中使用它

我的 _mixin.scss 文件：

@mixin font-face($font-name, $font-path, $font-weight, $font-style) {
  @font-face {
    font-family: "Lato-Bold";
    src: url("../../css/fonts/Lato/Lato-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: bold;
  }
}

这是对的吗？

编译时出现错误。这是我第一次使用字体和 ttf 文件。这是一个项目，所以我不能添加其他字体，我必须这样使用它，你能帮帮我吗？

如何使用这个 mixin，如何在我的 CSS 和/或 Html 中包含我的字体系列？

我正在尝试将其写入我的 _typography.scss 文件中，这会产生错误”：

@include font-face("Lato-Bold", "../../css/fonts/Lato/Lato-Bold", 700, bold);

./src/scss/main.scss 中的错误 (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main .scss) 找不到模块：错误：无法解析“/Users/****/Desktop/****/src/scss”中的“../../css/fonts/Lato/Lato-Bold.ttf” @ ./src/scss/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/scss/main.scss)

Ps：我正在使用 webpack.config.js | webpack-dev-server 并使用 --watch 编译 sass

感谢您的帮助！

Answer 1

在你的 mixin 中试试这个

@mixin font-face($font-name, $font-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-name;
    src: url(#{$font-path});
    font-weight: $font-weight;
    font-style: $font-style;
  }
}