在全局 CSS 文件中使用本地资源？

Question

如果我有一个定义了一些基本颜色和字体等的全局 CSS 文件，并将其包含在我的顶级布局文件中import "$lib/assets/app.css"，那么我如何从该 css 文件中引用本地字体和图像，它们也是在文件夹中/lib/assets？目前看来我必须将这些文件放入/static，但这会在创建构建时产生警告，更重要的是，它们在浏览器中仅缓存 4 小时。

举个例子，我的$lib/assets/app.css文件中有这样的内容：

@font-face {
  font-family: "Custom";
  src: url("/fonts/Bitter-Regular.ttf");
  font-display: swap;
}

当该字体放置在/static文件夹中时效果很好，但我宁愿将其放置在文件夹中$lib/assets，因为这可能意味着它成为不可变构建的一部分并且缓存的时间更长。

Answer 1

你可以$lib在你的 CSS 中使用：

@font-face {
  font-family: "Custom";
  src: url("$lib/assets/fonts/Bitter-Regular.ttf");
  font-display: swap;
}