Laravel Vite Setup: How to Add Custom CSS and JS Files

Laravel Vite is a modern asset bundler for Laravel applications. It offers faster build times and an improved developer experience. In this article, we’ll explore different ways to include CSS and JavaScript files in a Laravel project using Vite.

link two types available 

1. Input array inside link and layouts header link

2. Direct link set in js file inside 

1. Adding CSS Inside input




resources/css/app.css
resources/css/app2.css




Then, in your Blade template (resources/views/layouts/app.blade.php), include the Vite directive:




@vite(['resources/js/app.css','resources/js/app2.css']);

import { defineConfig } from 'vite';

import laravel from 'laravel-vite-plugin';

export default defineConfig({

    plugins: [

        laravel({

            input: [

                'resources/css/app.css',

                'resources/css/app2.css',

            ],

            refresh: true,

        }),

    ],

});

laravel official document link: vite customer CSS link

import { defineConfig } from 'vite';

import laravel from 'laravel-vite-plugin';

 

export default defineConfig({

    plugins: [

        laravel([

            'resources/css/app.css', //remove this

            'resources/js/app.js',

        ]),

    ],

});

Instead, you should import your CSS via JavaScript. Typically, this would be done in your application's resources/js/app.js file:

import './bootstrap';
import '../css/app.css';