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;
}