using Vite for compiling and versioning SCSS, JS and static assets

Question

I'm using blade with Vite for front-end and I want Vite to handle and version all of my .scss,.js, and static assets files
this is from the documentation :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

I need to specify the entry points for my application so what if I have a 300 js file for example

should I import all of them inside the app.js file? but then the output file will be huge and most of the scripts will not be used on a single page

I think I'm missing something here can anyone help me figure out how to use Vite correctly?

for example, I want Vite to compile home.scss file to a file called home.css and if I use @vite('resources/scss/home.scss') file inside home.blade.php file it should link to the home.css?v=1697700661

I don't want to make all of my scripts and CSS in a single app.js or app.css file because this will affect the website's performance and might cause conflicts in the JS querySelector

Answer 1

I solved it by specifying each file that I want to use separately, I don't think it's the best way but it worked :

 plugins: [
        laravel({
            input: [
                // JS FILES
                'resources/js/app.js',
                'resources/js/pages/home.js',
                //The rest of .js files go here
                // SCSS FILES
                'resources/scss/base/general.scss',
                'resources/scss/pages/home.scss',
                //The rest of .scss files go here
            ],
            refresh: true,

        }),
    ],

Answer 2

In vite.config.js, mention all the scss and js file that has to be build as assets like

 plugins: [
    laravel({
        input: [
            // JS FILES
            'resources/js/app.js',
            'resources/js/pages/home.js',
            //The rest of .js files go here
            // SCSS FILES
            'resources/scss/base/general.scss',
            'resources/scss/pages/home.scss',
            //The rest of .scss files go here
        ],
        refresh: true,

    }),
],

Now, in the blade file, include the required file only. Like, in home page

@vite(['resources/scss/pages/home.scss', 'resources/js/pages/home.js'])

You need to add only the necessary files in this array. Like this you can avoid loading of unnecessary css and js files to a particular page.