I'm using the following combination of technologies:
- SvelteKit (1.5.0, using TypeScript), with Vite (4.0.0) as the build tool that comes with SvelteKit)
- Svelte's
adapter-static(2.0.1) for publishing to GitHub Pages - TailwindCSS with the Typography plugin
- The Inter font families via
import '../inter.css';in+layout.svelte
When 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 runtimeFor 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?
How to reproduce (with Svelte)
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 Prettier- Follow https://tailwindcss.com/docs/guides/sveltekit in short:
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init tailwind.config.cjs -p- the
vitePreprocesswas already in mysvelte.config.ts content: ['./src/**/*.{html,js,svelte,ts}']intailwind.config.js- add
@tailwinddirectives to a newapp.cssfile andimportit in a fresh+layout.sveltefile
- Add
<div class="bg-[url('/favicon.png')]">Repro.</div>to+page.svelte - Run
npm run build
In 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?)
How to reproduce (without Svelte)
It can also be done without Svelte, just Tailwind in a Vite project:
- Follow https://vitejs.dev/guide/ (
npm create vite@latest), pick "Vanilla" - Follow https://tailwindcss.com/docs/guides/vite but skip the Vite creation step (already done) and add the
@tailwinddirectives tostyle.cssfrom the template - Add
class="bg-[url('vite.svg')]"to the<body>tag
The 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.