Tailwind and Vite warnings: "didn't resolve at build time, it will remain unchanged to be resolved at runtime"
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 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?
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 autoprefixer
npx tailwindcss init tailwind.config.cjs -p
the vitePreprocess was already in my svelte.config.ts
content: ['./src/**/*.{html,js,svelte,ts}'] in tailwind.config.js
add @tailwind directives to a new app.css file and import it in a fresh +layout.svelte file
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 @tailwind directives to style.css from 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.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.
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/cad278543202b4c122a152eceada7e5473acb0bbb513b70ab13d0d3b92aedfe0