css - Bootstrap 5 - Sass 自定义字体不加载字体文件夹

Question

我想将位于 assets/fonts 中的字体文件夹加载到我的 bootstrap 5 项目中。我使用 custom.scss 文件来自定义 css 样式，并通过 Visual Code 和 Live Sass 编译器在资产中创建 custom.css 文件。这是我的项目的结构：

我的 sass 文件：

@font-face {
    font-family: "Grotesk-Light";
    src: url("../fonts/HKGrotesk-Light.woff2") format('woff2'),
         url('../fonts/HKGrotesk-Light.ttf') format('truetype');

    font-family: "Grotesk-Regular";
    src: url("../fonts/HKGrotesk-Regular.woff2") format('woff2'),
         url('../fonts/HKGrotesk-Regular.ttf') format('truetype');
    
    font-family: "Grotesk-Bold";
    src: url("../fonts/HKGrotesk-Bold.woff2") format('woff2'),
         url('../fonts/HKGrotesk-Regular.ttf') format('truetype');
}

/*
        Text Styles
*/
h1.display-1-big-title{
    font-family: "Grotesk-Regular";
    font-size: 12vw;
    line-height: 9vw;
}

我在浏览器中得到的结果：

我没有看到作为资源加载的 assets/fonts/ 文件夹。

简而言之，我对这个程序没有太多经验，我怕我犯了错误。

我浏览了 Bootstrap 文档来自定义字体，还浏览了与 Sass 和 Bootstrap 相关的所有内容：

https://getbootstrap.com/docs/5.0/customize/sass/

我不知道发生了什么。

标签： csstwitter-bootstrapsass