使用 SASS 在 @font-face 上强制 src答案

【问题标题】：force src on @font-face using SASS使用 SASS 在 @font-face 上强制 src
【发布时间】：2020-09-16 02:10:09
【问题描述】：

我的项目中有一些自定义字体，并使用@font-face 引用它们。但是当 SASS 被编译时，src 完全错误，指向原始文件夹。我希望它指向 CSS 文件所在的当前文件夹。

SASS：

@font-face {
    font-family: Default;
    src: url("Poppins-Medium.ttf");
}

@font-face {
    font-family: Regular;
    src: url("Poppips-Regular.ttf");
}

@font-face {
    font-family: SemiBold;
    src: url("Poppins-SemiBold.ttf");
}

@font-face {
    font-family: Bold;
    src: url("Poppins-Black.ttf");
}

编译的 SASS：

@font-face {
  font-family: Default;
  src: url("../../STYLE/Layout/Poppins-Medium.ttf"); }

@font-face {
  font-family: Regular;
  src: url("../../STYLE/Layout/Poppips-Regular.ttf"); }

@font-face {
  font-family: SemiBold;
  src: url("../../STYLE/Layout/Poppins-SemiBold.ttf"); }

@font-face {
  font-family: Bold;
  src: url("../../STYLE/Layout/Poppins-Black.ttf"); }

我希望来源是“Poppins-Black.ttf”，因为它们在同一个文件夹中。

【问题讨论】：

您是否尝试在字体文件名前添加./？
@Arkellys 是的，但相对于构建文件夹，结果仍然相同
你用什么编译sass？
@Arkellys 用于 Visual Studio 的 Web 编译器扩展

标签： css sass

【解决方案1】：

我最终将字体文件复制到构建文件夹并从那里引用它们，

【讨论】：