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

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

jlrdw

2 years ago

Level 75

The vite site goes into those items. https://vitejs.dev/guide/

The link is in the first paragraph here: https://laravel.com/docs/10.x/vite

1 like

cengdpu

2 years ago

Level 1

@jlrdw I have read the entire page of: https://laravel.com/docs/10.x/vite it doesn't specify how to add separate SCSS files and link them

I tried this :

 laravel({
            input: [
                'resources/sass/**/*.scss',
                'resources/js/**/*.js',
            ],
            refresh: true,
        }),

and I linked the pages like this : @vite('resources/sass/pages/home.scss') for the home page for example it worked on the dev server but Vite couldn't build the assets when I run: npm run build I have read this page as well: https://vitejs.dev/guide/ and https://vitejs.dev/config/

but did not find what I was looking for

cengdpu

2 years ago

Best Answer

Level 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,

        }),
    ],

1 like

Please or to participate in this conversation.