search

vitejs / vite

Next generation frontend tooling. It's fast!
http://vitejs.dev
MIT License
67.61k stars 6.09k forks source link

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

Open Destroxim opened 3 weeks ago

Destroxim commented 3 weeks ago

Documentation is

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 commented 1 week ago

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.