[vite:css] [postcss] ENOENT: no such file or directory

[Destroxim]

Documentation is

• Missing
• Outdated
• Confusing
• Not sure?

Explain in Detail

npm run build worked fine on my local dev environment but failed with:
[vite:css] [postcss] ENOENT: no such file or directory, open '/home/forge/website.com/resources/js/assets/fonts/**quicksand-regular**/7f9edfb12c4146a51e3a8b95042aeb26.ttf'
when deploying to forge.

After a 3 hour voyage I realised that vite on my deployment server somehow is case sensitive and it's nothing about my aliasing..

It was stored like this:

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

But referenced like this:

@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:

resolve: {
        alias: {
            '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
        },
    },

Had to change Quicksand-Regular to quicksand-regular in my font directory to make this work:

Your Suggestion for Changes

Add the error at troubleshooting in the deployment area

Reproduction

No response

Steps to reproduce

No response

[aminnairi]

This error occurs relatively often when creating a brand-new project with npm create vite (using the Vanilla TypeScript template) on my Arch Linux installation. The workaround is to add a file named postcss.config.mjs with the following content.

export default {};

Can't figure out why this is not part of the defaults in the template for some reason, I must not be the only one that has this issue.