CSS url links are not relative

[mitchellwarr]

When using in SCSS something lilke:

@font-face {
  font-family: Flame;
  font-weight: 400;
  src: url("./assets/fonts/TheFont.otf") format("opentype");
}

Vite will correctly import it for you and put it in your build folder. After deploying to a bucket and opening the index.html, the font cannot be found because vite compiled it to:

@font-face {
  ...
  src: url(/TheFont.otf) format('opentype');
}

Where as it needs to be:

@font-face {
  ...
  src: url(./TheFont.otf) format('opentype');
}

url(/TheFont.otf) vs url(./TheFont.otf)

I have tried the workaround of adding base: "./" to my vite config, and that did fix my issue here for css.

Thought right now im trying to figure out how to get rid of the base tag in the html now as it completely breaks my buckets in loading any of the scripts

[hi-ogawa]

Can you explain how you serve your index.html?
It seems you are not serving at root of the domain but perhaps something like https://example.com/some-path.
When serving it without trailing slash (/some-path vs /some-path/), relative base base: "./" would probably miss the assets inside index.html.

[mitchellwarr]

Its in a bucket system that also has version number in the path. I had some other issues like a base element tag in the html root that was messing with things too, and confused me for the longest time about what was going on.

But i since learned its not a vite thing, it was due to the nx vite generation script adding it into the index.html.

Setting vite build to "./" did fix the issue in scss. Im not sure if there is an issue here at all now, if this makes sense as a behavior, but i figure this is useful for people googling about scss url to come find

[mitchellwarr]

I should point out in the scss url "/" vs "./" part, that esbuild and scss compile it to "./" where as vite does "/"

i think i forgot to mention that part