无法使用@ font-face SCSS本地文件夹

Question

我有两个必须与Sass一起使用的“ ttf”字体文件-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;
  }
}

这是正确的吗？

这在编译时给我一个错误。这是我第一次使用font-face和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）< / p>

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

谢谢您的帮助！

Answer 1

在混入中尝试

@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;
  }
}