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

Posted 2023-03-23

【中文标题】不能使用@font-face SCSS 本地文件夹

【英文标题】：can't use @font-face SCSS local folder

【发布时间】：2019-08-12 14:30:39

【问题描述】：

我有两个“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

感谢您的帮助！

【问题讨论】：

您遇到了什么类型的错误以及为什么即使您使用静态值也可以在 mixin 中传递边界

根据你的url，它说你的字体目录包含一个目录“Lada”，其中包含一个名为“Lada-bolt”的字体，但是你的文件结构没有显示这个文件夹。这是您提问时的文案错误吗？

@Hammadtariq 我更新了我的错误

你在使用mixin中的变量吗

@Ferrybig 哦，这里写的时候“Lado”是个错误，在我的项目中还可以，但我也会在这里更新

【参考方案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;
  

【讨论】：

当您在 src 上添加“url()”导致我的编译崩溃，但没有“url()”不会崩溃，但仍无法应用 Lato-Bold 我添加了一个 h1页面并像这样应用 h1 @include font-face("Lato-Bold", "../../css/fonts/Lato/Lato-Bold", 700, bold);

使用“url()”会遇到什么类型的错误并确保您的路径正确

尝试插值语法url(#$font-path)我希望它有效

第二个选项是给出字体的绝对路径

那个语法不起作用，所以绝对路径，我必须搜索更多，这很奇怪为什么不起作用