问题描述
我正在使用gatsby-plugin-sass包含我的sass文件.我有一个导入_typography.sass的web-animations.sass文件.我的_typography.sass具有这样的字体声明:
I'm using gatsby-plugin-sass to include my sass files. I have a web-animations.sass file that imports _typography.sass. My _typography.sass has a font-face declaration like this:
@font-face
font-family: 'BrandonPrinted'
src: url(../../global/fonts/brandonprinted-one-webfont.eot)
src: url(../../global/fonts/brandonprinted-one-webfont.eot?#iefix) format('embedded-opentype'), url(../../global/fonts/brandonprinted-one-webfont.woff) format('woff'), url(/src/page-assets/global/fonts/brandonprinted-one-webfont.ttf) format('truetype')
当我运行gatsby develop时，出现此错误:
When I run gatsby develop I get this error:
ERROR Failed to compile with 2 errors 19:51:15
These relative modules were not found:
* ../../global/fonts/brandonprinted-one-webfont.eot in ./~/css-loader!./~/sass-loader?{"plugins":[]}!./src/page-assets/work-ive-done/subpages/web-animations/styles/web-animations.sass
* ../../global/fonts/brandonprinted-one-webfont.woff in ./~/css-loader!./~/sass-loader?{"plugins":[]}!./src/page-assets/work-ive-done/subpages/web-animations/styles/web-animations.sass
似乎字体URL路径被解释为相对于web-animations.sass而不是相对于_typography.sass，因为如果我将web-animations.sass上移两个级别，那么该错误就会消失.
It seems that the font url path is interpreted to be relative to web-animations.sassinstead of relative to _typography.sass because if I move web-animations.sass up two levels, then this error goes away.
有没有办法让_typography.sass相对于其自身位置查找字体文件?
Is there a way to have _typography.sass look for the font files relative to its own location?
推荐答案
似乎已解决，但万一将来有人遇到这种情况并希望有替代解决方案，请，其中包括一个已部署站点的回购，演示了在Sass中使用静态文件的不同方式.
Seems like this is resolved, but in case anyone runs across this in the future and wants an alternative solution I answered a similar question over here and included a repo with a deployed site demonstrating different ways of using static files with Sass.
这篇关于导入的Sass文件找不到字体文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！