Web字体Sass Mixin问题

Question

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

以下是字体文件位置。

由于某种原因，字体没有渲染？我不确定为什么。

这是我的SASS mixin：

@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');

这是一个create-react-app。我和我的组件一起使用sass。

在此处查看文件夹结构，因为已编译的.css位于组件文件夹中。

Answer 1

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

因为'assets'是'components'文件夹的兄弟，生成'compiled.css'在'components'文件夹中。