Question

在我的react应用程序中，我有一个类似的文件夹结构：

src
 -assets
   -fonts
 -components
   -NormalComponents
   -ContentCards
     -CardType1
     -CardType2
 -containers
 -styles
 etc

我正在导入位于styles文件夹中的mixin.scss文件。它包含一个混合函数，用于从以下路径导入字体：src/assets/fonts/myfonthere.ttf

这是我的功能：

@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(MyFont-Bold, '../assets/fonts/MyFont-Bold');

我可以在src/components/NormalComponents级别无错误地导入此混合，但是，当我在src/components/ContentCards/CardType1进行导入时，会引发错误。

错误：Module not found: Can't resolve '../../assets/fonts/MyFont-Bold.eot'

这是由于Content Cards组件的嵌套文件夹结构吗？有什么办法可以解决这个问题，以便我可以在任何级别导入mixin而不会出现此问题？

Answer 1

我不认为这是嵌套文件夹结构的问题。是否可能是从样式目录中导入mixin文件，添加了更多医生之后，您的{file-path}有问题吗？

SASS字体导入嵌套问题

1 个答案: