Login/Register
Tailwind and Vite warnings: "didn't resolve at build time, it will remain unchanged to be resolved at runtime"
Asked Answered
tailwind-csssveltevitesveltekit
H

7

14

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:

  1. npm create svelte@latest my-app, see https://kit.svelte.dev/docs/creating-a-project, I chose "Skeleton Project" with TypeScript and Prettier
  2. 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
  3. Add <div class="bg-[url('/favicon.png')]">Repro.</div> to +page.svelte
  4. 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:

  1. Follow https://vitejs.dev/guide/ (npm create vite@latest), pick "Vanilla"
  2. 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
  3. 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.

Haulm answered 1/3, 2023 at 8:45 Comment(13)
Thank you! I was also thinking on making this exact question out of annoyance so you saved me on doing it :-D. In the mean while, I investigated a bit and you can clear them off if you follow the expected Vite's path for static files. If you do this, however, it won't find the files when you run the compiled project. It suggests to me that Vite's compilation is leaving these aside for the SvelteKit's adapters to resolve the way that suits the best to them. IMHO, this is should be better clarified and handled by the team but, like you said, it doesn't make the project less functional. – Tadd
Cheers! Your comment makes me feel like I should maybe open up a GitHub issue about it, but it's very hard to tell which project I should open it at. – Haulm
Since Vite is merely the compiler here, I suggest the ticket to be raised on the SvelteKit project since, at the end of the day, it is SvelteKit the one that commands Vite into compiling what it is expected. – Tadd
At first glance that made sense to me too. But trying to prepare a reproducible scenario for such an issue, I found that it probably has nothing to do with Svelte, and is an Vite+Tailwind issue. - I'll add the initial repro to the question in a second, but would have to create a Tailwind+Vite project with no Svelte to be sure of things. – Haulm
Indeed, vanilla Vite with Tailwind also has this situation. Added it to the question. – Haulm
Oh, wow! You blew my mind there. I would have swear it was an SvelteKit issue. This makes me even more curious about it. Thank you! – Tadd
Found this related GitHub issue from past November, thinking that should pop up with a solution. – Haulm
Nice one! You went way further than I did. Let's see if somebody provides some solution. Cheers! – Tadd
I was browsing SO and I stumbled upon this question and answer. I immediately thought on our discussion here so I had to try it. Guess what... it totally works! It not only keeps the log quiet but it also bundles the correct files! Instead of $lib tho, I added $fonts: resolve('./static/fonts') into my vite.config.ts and then I used $fonts inside the CSS file. I'm totally baffled but at least there is a workaround (although it looks like the solution to tell Vite where the files are). – Tadd
Thanks for sharing @carlosV2! 🧡 I'll give that a try as well soon. – Haulm
@Tadd Could you please show exactly how you add $font: resolve() into the vite.config.ts file? I'm a bit lost. – Donyadoodad
@Tadd Probably this: export default defineConfig({ plugins: [sveltekit()], resolve: { alias: { $fonts: "./static/fonts" } } }); (works for me, thanks for the tip) – Donyadoodad
Hi @NicolasLeThierryd'Ennequin, yes, that's the way. I think I'm going to add this as an answer to this question so future people has a simpler solution. – Tadd
T
14

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.

Tadd answered 12/3, 2023 at 22:42 Comment(9)
Interesting! Will try this solution some time later. Curious to see if it also can fix the class="bg-[url('vite.svg')]" variant. Either way: thanks for sharing! – Haulm
Alas, couldn't get it to work in a way that works for both npm run dev and for npm run build. – Haulm
I'm curious on knowing how you want this to work. I've tried with class="bg-[url('$static/vite.svg')]" and it work for both npm run dev and npm run build. The only change I had to make was to tell Vite's development server to allow serving from the root of the project (probably it can be further constrained). – Tadd
Same problem as @Jeroen: while this solution solves the problem for build, the paths are broken in dev server mode. For instance, instead of the expected "/fonts/" path, the requested path is "/@fs/fonts/". Any idea how this can be fixed? – Donyadoodad
@Haulm To solve the dev/build problem, you may want to take a look at my answer here: https://mcmap.net/q/828509/-sveltekit-dev-build-and-path-problems-with-static-assets-referenced-in-css – Donyadoodad
@NicolasLeThierryd'Ennequin good stuff! Haven't tried it yet but it looks like a good solution. Thanks for sharing! – Tadd
This approach did not work for me – Cryosurgery
Not working here either. My css file is simply imported using import '../css/style.css'. The CSS works during dev time. But when building it's suddenly not found? – Kiona
I tried this solution but modified for our public assets. Now works on dev and build. – Jeri
R
6

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!

Rica answered 7/4, 2023 at 9:16 Comment(1)
Awesome, this fixed my build paths (I'm using Vite v4.3.3) – Viperish
N
3

I ran into this same issue when setting the background-image of a SvelteKit component. This is what I did to get the error in production:

.selector {
  background-image: url("src/assets/images/name-of-image.jpg");
}

I found out that omitting the / at the beginning of the file path caused the error in production. So I simply added the / at the beginning of the file path and the images now appear in production:

.selector {
  background-image: url("/src/assets/images/name-of-image.jpg");
}
Nightwear answered 15/7, 2023 at 0:44 Comment(1)
This works for me using "vite": "^4.5.0" – Ashwell
S
2

For those using the Laravel/Inertia/Vue stack, the problem seems to be Laravel's use of an alias from the storage directory to the public directory. So, similar to answers above, replace the alias with an absolute url.

replace:

url('/storage/images/homeBg_2xl.jpg')

with:

url('../../storage/app/public/images/homeBg_2xl.jpg')

Hope this helps.

Skylight answered 24/6, 2023 at 16:31 Comment(0)
D
2

I'm using Vue 3, Vite, and Quasar. The below worked for me in the .vue file. It took me a lot of time to crack this.

Inside HTML the below worked.


<q-header elevated style="background-image: url('assets/header_altcolor.png')">

I had the problem inside CSS and the below finally worked for me in CSS.


.pageLayout {
  background-image: url('/assets/landingpage_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

The only difference was a slash in the front when we use it in CSS.

Doerrer answered 7/7, 2023 at 17:5 Comment(0)
C
1

I was also facing the same problem but I solved this

updating my vite.config.ts

Config : vite.config.ts

Css : adding in css file

Congregation answered 22/12, 2023 at 21:3 Comment(1)
Wow, it's a cool solution !) – Sheep
H
0

Also, the other approach is to convert your image to base64, then use it in your CSS file.

background-image: url("data:image/png;base64,<base64code>");
Hobard answered 12/7, 2023 at 5:56 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.