Menu
I'm using the following combination of technologies:
adapter-static (2.0.1) for publishing to GitHub Pagesimport '../inter.css'; in +layout.svelteWhen running npm run build I get a bunch of these warnings (newlines for readability:
/img/logo.png referenced in D:/git/my-org/my-repo/src/app.css
didn't resolve at build time, it will remain unchanged to be resolved at runtime
/fonts/Inter-Thin.woff2?v=3.19 referenced in D:/git/my-org/my-repo/src/inter.css
didn't resolve at build time, it will remain unchanged to be resolved at runtime
For me personally, the build output actually works, and includes all said resources. Also if I delete the output folder and generate a completely fresh build. I'm experiencing no problem or error. But the output feels like warnings to me, and "warnings are errors from the future"!
So, my question is: What does this message above mean, and should I treat it as a warning and change something?
Here's one way to reproduce said warning:
npm create svelte@latest my-app, see https://kit.svelte.dev/docs/creating-a-project, I chose "Skeleton Project" with TypeScript and Prettiernpm install -D tailwindcss postcss autoprefixernpx tailwindcss init tailwind.config.cjs -pvitePreprocess was already in my svelte.config.tscontent: ['./src/**/*.{html,js,svelte,ts}'] in tailwind.config.js@tailwind directives to a new app.css file and import it in a fresh +layout.svelte file<div class="bg-[url('/favicon.png')]">Repro.</div> to +page.sveltenpm run buildIn short, it seems to be triggered by arbitrary values referencing other files? (At this point I'm not sure if Svelte is strictly needed to reproduce the issue, perhaps just Tailwind+Vite is enough?)
It can also be done without Svelte, just Tailwind in a Vite project:
npm create vite@latest), pick "Vanilla"@tailwind directives to style.css from the templateclass="bg-[url('vite.svg')]" to the <body> tagThe same warning occurs here too.
Footnote: I had added my repro as a comment to Vite GitHub issue which has since been marked as resolved by a PR.
353
It seems like the potential solution is to declare your static paths in your vite.config.ts file. For example:
import { resolve } from 'path';
const config: UserConfig = {
resolve: {
alias: {
$fonts: resolve('./static/fonts')
}
}
};
export default config;
Of course, this is still applicable to other Vite configurations (like for javascript).
Once you have this alias set, you can use it like this in your app.css:
@font-face {
src: url('$fonts/<your font file here>') format('woff2');
/* Any other font directive */
}
Please, note that I'm merely providing this answer to try and help anyone. Credit, however, should go to @H.B. in this other Stackoverflow question.
198
For those who are using Vite with vanilla JS and tailwind. This part of https://vitejs.dev/guide/assets.html#the-public-directory worked for me.
Note that:
You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png.
Writing
class="bg-[url('/wood-bg.jpg')"
succeeds but
class="bg-[url('./wood-bg.jpg')"
gives "didn't resolve at build time, it will remain unchanged to be resolved at runtime"
Hope this helps!
28
answered Dec 24 '25 09:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
