#Rewriting URLs inside CSS (fonts) with BASE_URL

5 messages · Page 1 of 1 (latest)

forest spade Mar 14, 2025, 6:44 AM

Hi Astro friends! I've recently discovered Astro and am absolutely loving it.

I'm changing my site to use a base path now, and my custom fonts (in public/fonts, loaded in src/styles/global.css) work great with npm run build - their URLs inside the CSS file seem to get rewritten by the bundler to include my new base path. However, they don't work with npm run dev - the URLs inside the CSS aren't getting rewritten. Any ideas?

I have base set in astro.config.mjs.

I originally thought I'd just have to hard-code the URLs, but then I noticed that it works in npm run build, so there must be something that can do it. 🤷‍♂️

Repo is here, feel free to check it out: https://github.com/julianguide/probe.rs

Before noticing that build works / rewrites, I got a little more creative - for example, creating a src/pages/fonts.css.ts that could dynamically create the font URLs from import.meta.env.BASE_URL. That didn't work, I think due to some CSS loading ordering issues.

And I've spent a while searching around ("Astro CSS base url", etc.), but couldn't find anything specific. I figure this might require diving into the bundler. build.assetsPrefix didn't seem to help.

forest spade Mar 14, 2025, 7:09 AM

Aha! A clue - just noticed that when I hardcode the base path in .css and run npm run build, Vite complains:

08:08:13 [WARN] [vite] /probe.rs/fonts/epilogue.ttf referenced in /probe.rs/fonts/epilogue.ttf didn't resolve at build time, it will remain unchanged to be resolved at runtime