If I have a global CSS file which defines some basic colors and fonts and all that, and include it in my top-level layout file with a simple import "$lib/assets/app.css", then how can I reference local fonts and images from within that css file, which are also in the /lib/assets folder? Currently it seems I have to put those files into /static, but that results in warnings when creating a build, and more importantly, they get cached in the browser for only 4 hours.

As an example, I have something like this in my $lib/assets/app.css file:

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

That works fine when that font is placed in the /static folder but I’d rather have it placed in $lib/assets because presumably that would mean it becomes part of the immutable build and gets cached way way longer.

>Solution :

You can just use $lib in your CSS:

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