CSS full path for images

[Grafikart]

Describe the bug

When vite is required (included from another endpoint) the reference to images in the CSS are lost cause the CSS is injected in the page.

div {
    background: url(/image/demo.png)
}

When transpiled I think it would be nice to inject the full path to avoid any problem

div {
    background: url(http://localhost:3000/image/demo.png)
}

Or maybe offer a configuration to set the "publicPath"

Reproduction

Start any vite template including CSS. Then load this from another endpoint.
For instance I'm on http://localhost:8000 and I include

<script src="http://localhost:3000/app.js" type="module" defer></script>

System Info

• vite version: 2.0.0-beta.27
• Operating System: all
• Node version: all
• Package manager (npm/yarn/pnpm) and version: all

[underfin]

When vite is required (included from another endpoint) the reference to images in the CSS are lost cause the CSS is injected in the page.

Not for sure for this, can you give a reproduction?

When transpiled I think it would be nice to inject the full path to avoid any problem

This is a bad idea. It will increase file size and the output only can be published at one endpoint.

[Grafikart]

This is a bad idea. It will increase file size and the output only can be published at one endpoint.

only for the dev environment. The build work like a charm since image path end up being relative to the CSS.

When vite is required (included from another endpoint) the reference to images in the CSS are lost cause the CSS is injected in the page.

I'll create a small repo to showcase the problem if you want.

[yyx990803]

There are relevant test cases passing: https://github.com/vitejs/vite/blob/main/packages/playground/assets/css/css-url.css#L2

So yeah a reproduction is needed.

[Grafikart]

Here is the repository (as simple as I could) to illustrate my use case and my problem. https://github.com/Grafikart/demo-error-vite

The problem comes when the CSS is injected in the page on a completely different host since

background: url(/nested/asset.png);

This code will look for {currentPageHost}/nested/asset.png instead of referencing {devServerHost}/nested/asset.png during development since the CSS is injected into the page.

For context, I'm trying to include vite workflow with some backend applications (laravel / symfony / wordpress...).

[yyx990803]

That's expected. You need to make your main server to also serve static files in the Vite directory. This is not something Vite will handle.

[dbpolito]

I just got bitten by this problem too, i know this is by design but it might be a difficult problem to solve on hybrid scenarios where you have a web app like laravel or symfony working with vite...

In my use case i have a laravel project and the static files that are breaking are the font files from font awesome, and the problem is that now it's hitting my web server for the files, like: http://localhost/node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2

The problem is that the file structure of a laravel project is:

• ...
• node_modules
• public

And the web server serve directly to the public folder, same with symfony but would go to web folder...

I know i can make adjustments to my nginx / web server changing root and to serve anything starting with node_modules to that folder and everything else to the usual public folder but this will make really hard for adoption on these projects and it might not be an easy task on all scenarios.

If an option could be introduced to make use of Vite dev server for CSS Static files would make it easy to be used for a lot of more users. ❤️

[leevigraham]

@dbpolito

might be a difficult problem to solve on hybrid scenarios where you have a web app like laravel or symfony working with vite...

Agreed. Just had the same issue with a Symfony project. Pretty sure it will be the same with any php CMS as well.

[leevigraham]

@dbpolito I also tried setting config.server.hmr to false but then there's no file watching for changes and this issue appears: #2345

[leevigraham]

@dbpolito FYI this is also an issue with snowpack hmr.

[nobleach]

I've noticed the opposite problem. I have imported a component/style framework that uses an icon font via a rule like this:

@font-face {
  font-family: 'rsuite-icon-font';
  src: url('https://cdn.jsdelivr.net/npm/rsuite/dist/styles/fonts/rsuite-icon-font.ttf') format('truetype'), url('https://cdn.jsdelivr.net/npm/rsuite/dist/styles/fonts/rsuite-icon-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

When compiled those absolute urls become:

http://localhost:8080/node_modules/rsuite/lib/styles/https://cdn.jsdelivr.net/npm/rsuite/dist/styles/fonts/rsuite-icon-font.woff

It seems the code is blindly just prepending whatever is in those url() declarations. I see no test for this here: https://github.com/vitejs/vite/blob/main/packages/playground/assets/css/css-url.css So it appears to be an overlooked scenario.

[at86]

in vite.config.js use config of

  css: {
    preprocessorOptions: {
      less: {
        rootpath: "http://localhost:3000/src",
      },
    },
  },

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.