Struggling with bootstrap-icons Library in Vite.js

[oussama-he]

I'm using vitejs and facing a problem with the bootstrap-icons library.

I installed it like this npm install bootstrap-icons

In the main.js file I wrote this:

import 'vite/modulepreload-polyfill';
import '../css/style.css';
import Alpine from 'alpinejs' 
window.Alpine = Alpine 
Alpine.start() 
...

In my style.css file I imported the bootstrap-icons CSS file like this:

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Baloo+Bhaijaan+2:wght@400;700&display=swap');

@import 'simplebar/dist/simplebar.min.css'; 

@import 'bootstrap-icons/font/bootstrap-icons.min.css';

However, the icons used in the HTML page do not appear, and I get this error in the console:

GET http://localhost:8888/static/@fs/home/oussama/budget-app/node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2?7141511ac37f13e1a387fb9fc6646256 net::ERR_ABORTED 404 (Not Found)

GET http://localhost:8888/static/@fs/home/oussama/budget-app/node\_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff?7141511ac37f13e1a387fb9fc6646256 net::ERR\_ABORTED 404 (Not Found)

Other CSS rules work fine.

package.json and vite.config.js look like this:

{
  "name": "Mahfazati",
  "version": "1.2.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "alpinejs": "^3.13.3",
    "bootstrap": "^5.3.2",
    "bootstrap-icons": "^1.11.2",
    "chart.js": "^4.4.0",
    "htmx.org": "^1.9.6",
    "hyperscript.org": "^0.9.12",
    "resize-observer-polyfill": "^1.5.1",
    "simplebar": "^6.2.5",
    "vite": "^4.4.11"
  }
}

const { resolve } = require('path');

module.exports = {
    root: resolve('src/static'),
    base: '/static/',
    server: {
        host: '0.0.0.0',
        port: 3000,
        open: false,
        watch: {
            usePolling: true,
            disableGlobbing: false,
        },
    },
    resolve: {
        extensions: ['.js', '.json'],
    },
    build: {
        outDir: resolve('src/static/dist'),
        assetsDir: '',
        manifest: true,
        emptyOutDir: true,
        target: 'es2015',
        rollupOptions: {
            input: {
                main: resolve('src/static/js/main.js'),
            },
            output: {
                chunkFileNames: undefined,
            },
        },
    },
};

Please can someone help me to fix this problem?

Thank you in advance.

[Bartheyrman22]

Did you try to change the $bootstrap-icons-font-dir variable?
$bootstrap-icons-font-dir: "/node_modules/bootstrap-icons/font/fonts";

[tr0yka]

tnx