如何使SCSS中字体URL与不同的Flask应用程序根一起工作

Question

我有一个使用Flask的网站，我使用Flask-Assets和libsass过滤器。下面是我的一些SCSS代码：

@font-face {
    font-family: AnakAnak;
    src: url("/static/anakanak.ttf");
}

这通常可以很好地工作。但是，当我将Flask应用程序的APPLICATION_ROOT配置值设置为/otherpath时，字体文件现在是/otherpath/static/anakanak.ttf，但CSS仍然指向/static/anakanak.ttf。我该如何解决这个问题呢？有没有什么方法可以把类似这样的东西插入到CSS中？

src: url(url_for('static', filename='anakanak.ttf');

Answer 1

我刚刚想出了一个解决方案。由于输出的CSS文件也将是一个静态文件(/static/gen/XXXXXXXX.css)，因此只需在CSS文件中使用相对URL：

src: url("../anakanak.ttf");