[SOLVED] Font css src path is false

Font css src path is false

i try to create a project with Vue and Symfony.

I use a twig template as main page for a single page app.

I cant use the font from bootstrap icons because the path is not correct.

Any one has a idea how i can configure it that i can use the bootstrap-icon-font in this project?

The current css output is:

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

My twig file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="{{ asset('admin/favicon.ico') }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dev-Portal</title>
    <link rel="stylesheet" crossorigin href="{{ asset('/admin/main.css') }}">
    <script type="module" crossorigin src="{{ asset('/admin/main.js') }}"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

My Vite 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'
            }
        }
      }
  },
});

This is the project structure. There is a composer project in the root and a npm project in the admin directory enter image description here

I expect that the path for the font start without a slash (/) or start with (./)

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

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

Solution

I have found a simple solution.

just add base: './', to the vite.config.ts. Now all assets are working fine!