Web Font Sass Mixin Issue

Question

我正在尝试使用具有以下扩展名的 sass mixin 导入网络字体，.eot、.woff、.ttf

这里是字体文件的位置。

由于某种原因字体没有呈现？我不确定为什么。

这是我的 SASS 混合：

@mixin font-face($font-family, $file-path) {
    @font-face {
        font-family: $font-family;
        src: url('#{$file-path}.eot');
        src: url('#{$file-path}.woff');
        src: url('#{$file-path}.ttf');
    }
}

用法：@include font-face(Roboto-Regular, '../../assets/fonts/Roboto-Regular');

这是一个创建反应应用程序。我正在使用 sass 和我的组件。

请参阅此处了解文件夹结构，因为编译后的 .css 位于组件文件夹中。

Answer 1

试试@include font-face(Roboto-Regular, '../assets/fonts/Roboto-Regular');

因为“assets”是“components”文件夹的兄弟，生成的“compiled.css”位于“components”文件夹中。