[vite:css] [postcss] ENOENT: on Laravel Forge Deployment

I am trying to deploy my app to Laravel Forge and bundle it with vite.

It works fine on my local dev Server without any error however the Deployment fails while building on my prod server due to not resolvable paths.

Anyone faced the same issue yet?

the error:

> build
> vite build

vite v5.4.3 building for production...
transforming...

✓ 147 modules transformed.
x Build failed in 5.64s
error during build:
[vite:css] [postcss] ENOENT: no such file or directory, open '/home/forge/website.com/resources/js/assets/fonts/quicksand-regular/7f9edfb12c4146a51e3a8b95042aeb26.ttf'
file: /home/forge/website.com/resources/css/app.css:undefined:NaN
Error: [postcss] ENOENT: no such file or directory, open '/home/forge/website.com/resources/js/assets/fonts/quicksand-regular/7f9edfb12c4146a51e3a8b95042aeb26.ttf'

the correlating part in my app.css file:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Fonts */
@layer base {
    @font-face {
        font-family: "Quicksand";
        src:local("Quicksand-Regular"),
        url('@/assets/fonts/quicksand-regular/7f9edfb12c4146a51e3a8b95042aeb26.ttf');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
}

my vite.config.mjs:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import {fileURLToPath, URL} from 'url';
import {resolve} from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/admin.js',
                'resources/js/user.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
                compilerOptions: { // tell vite not to resolve custom swiper components since they are "web components" not vue components
                    isCustomElement: (tag) => tag.includes('swiper')
                }
            },
        }),
    ],
    resolve: {
        alias: {
            'ziggy-js': resolve('vendor/tightenco/ziggy'),
            // '@': resolve(__dirname,'resources/js'),
            '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
        },
    },
    build: {
        outDir: 'dist',
        rollupOptions: {
            input: {
                user: resolve(__dirname, 'resources/js/user.js'),
                admin: resolve(__dirname, 'resources/js/admin.js'),
            },
            output: {
                entryFileNames: 'js/[name]-[hash].js',
                chunkFileNames: 'js/[name]-[hash].js',
                assetFileNames: ({name}) => {
                    if (/\.(css)$/.test(name ?? '')) {
                        return 'css/[name]-[hash][extname]';
                    }
                    return 'assets/[name]-[hash][extname]';
                },
            },
        },
        cssCodeSplit: true,
    },
});

my folder structure on local:

laravelapp/resources/css/app.css
laravelapp/resources/js/assets/fonts/Quicksand-Regular/7f9edfb12c4146a51e3a8b95042aeb26.ttf

my deployment script:

cd /home/forge/website.com
git pull origin $FORGE_SITE_BRANCH

$FORGE_COMPOSER install --no-dev --no-interaction --prefer-dist --optimize-autoloader

( flock -w 10 9 || exit 1
    echo 'Restarting FPM...'; sudo -S service $FORGE_PHP_FPM reload ) 9>/tmp/fpmlock

if [ -f artisan ]; then
    $FORGE_PHP artisan migrate --force
fi

npm ci
npm run build
rm -rf node_modules