Vite does not resolve css url() paths correctly

[DennisGarding]

Describe the bug

Older issue: #18398

I have the same problem. The browser can not load the font. If i add a dot before the slash or remove the slash, it works

My build config

build: { outDir: fileURLToPath(new URL('./../public/admin', import.meta.url)), target: 'esnext', manifest: true, emptyOutDir: true, minify: true, rollupOptions: { input: fileURLToPath(new URL('./src/main.ts', import.meta.url)), output: { entryFileNames: '[name].js', chunkFileNames: '[name]-[hash].js', assetFileNames: '[name].[ext]', globals: { vue: 'Vue' } } } },

The output

@font-face{ font-display:block; font-family:bootstrap-icons; src:url(/bootstrap-icons.woff2) format("woff2"),url(/bootstrap-icons.woff) format("woff") }

Used in App.vue style

<style> @import "./../node_modules/bootstrap-icons/font/bootstrap-icons.css"; @import "./../node_modules/bootstrap/dist/css/bootstrap.min.css"; ... ...

Reproduction

aaa

Steps to reproduce

No response

System Info

Ubuntu, Chrome

Used Package Manager

npm

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 vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[github-actions]

Hello @DennisGarding. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[DennisGarding]

Hello @DennisGarding. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs reproduction will be closed if they have no activity within 3 days.

Here is the simple repository. For installation, read the README.

https://github.com/DennisGarding/viteConfigReproduction

Is that enough?

[sapphi-red]

I don't see any problem with this build output as same as #18398. url(/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6) points the ../public/admin/bootstrap-icons.woff2 because Vite expects the output directory to be served under / by default.
Would you expand on what you are expecting here?

[DennisGarding]

i expect that there is a .(Dot) before the slash.

Like:

url(./bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6)

If you test it in chrome, you will see that it is not working without dot

as you see, there are no icons behind the text

This is the Browser source code

ChromeDevTools

The css file, reached in browser

the directory structure in the project

if i add a dot manually, it woks

[sapphi-red]

You can set base: './' in that case.

[DennisGarding]

You can set base: './' in that case.

Ok, that works. Thank you