css url() assets in html not handled in build process

[zoubingwu]

Describe the bug

writing css style in html entry file with followings:

<style>
	#app {
        background-image: url("./bg-texture.jpeg");
    }
</style>

Only works in dev mode.
The bg-texture.jpg won't be hashed and copied to the build output dir. Run yarn serve then you can see a 404 error complaining about can't find bg-texture.jpeg.

Reproduction

https://github.com/zoubingwu/vite-css-url-bug-repro

System Info

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Memory: 109.94 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.12.0 - /opt/homebrew/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 7.6.3 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1
  npmPackages:
    vite: ^2.3.8 => 2.3.8

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[ygj6]

You can place bg-texture.jpeg in <root>/public dir. It will be served at root path / during dev, and copied to the root of the dist directory as-is. Here is a detailed explanation https://vitejs.dev/guide/assets.html#the-public-directory .

<style>
	#app {
        background-image: url("/bg-texture.jpeg");
    }
</style>

[zoubingwu]

Yeah writing this in a separated css file and import it in js could workaround it, thought it's still a bug should be fixed so I opened a new issue here.

[BLumia]

+1 for this issue. The current workaround requires manually import the file from .js file or writing this in a separated CSS file. It can be redundance for a vanilla site or for a site using TailwindCSS that suggested to use style="background-image: url(...)" inline CSS for background image.

It could be useful if CSS url() inside HTML can be handled by default or configurable by editing vite.config.js or somewhere else.

[bluwy]

Looks like this is fixed now in Vite 2.8.6, and I believe it was fixed by #6321