Is there a way to add entire folder to Vite build?

Hello,

I might be doing things wrong because I just started testing with Vite. But assuming I have many .css files, is there a way to add the entire /resources/css/ folder to the Vite config file? The following didn't work:

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/'], // also 'resources/css/*' didn't work
            refresh: true,
        }),
    ],
});

And I am getting the following error:

Could not resolve entry module "resources/css/".

Thanks

kokoshneta

2 years ago

Level 27

The chatbot answer to this earlier question about the same thing suggests importing glob and using that. I’ve not tried or tested that, but I would imagine it would indeed work.

1 like

Ligonsker

2 years ago

Level 8

If that's such a weird workaround (I also found a similar answer on Stack Overflow) - then perhaps that's not how Vite is meant to be used? What do you think? If I have many css files, what would you do?

I always thought that Vite bundles multiple files into a single css file or "groups" that you need for example it can group 3 files into 1, and 3 others into another 1 so that you choose the "group" you want or individual files.

But I think I got Vite wrong - is Vite purpose to minify files per each file? so that if I need multiple files loaded into a page it still loads all of them (maybe just minified?), assuming I am not using a JS stack like React or Vue

Ligonsker

2 years ago

Level 8

Update: I did test a few simple css files, and it does minify per-file so for example identical css file was 420kb without Vite and 145kb with Vite.

But I still feel I'm doing something wrong...

kokoshneta

2 years ago

Level 27

@Ligonsker Honestly, I don’t really feel like I ‘get’ Vite either – I was just starting to get Mix, then Vite came along and did everything all differently. I just stick to a single app.css file and keep it to a minimum.

Please or to participate in this conversation.