laravel vite laravel-livewire laravel-authentication

@vite( 'resources/css/app.css' 'resources/js/app.js' ) is not working with laravel 9, vite 4.0.0

In Laravel 9 app, I installed Laravel auth (with Jetstreem livewire & vite-4.0.0) using the following commands:

composer require laravel/jetstream

php artisan jetstream:install livewire

php artisan migrate npm install npm run dev npm run build

In my app.blade.php and guest.blade.php @vite( 'resources/css/app.css' 'resources/js/app.js' ) is not working. CSS & JS is not loading.

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <!-- Styles -->
        @livewireStyles
    </head>

    <body>
    <div class="font-sans text-gray-900 antialiased">
        {{ $slot }}
    </div>
    @livewireScripts
    </body>

</html>

I have tried the solutions of This Question but nothing worked.

Solution

The problem is with app.css. Vite config works great without CSS.

Here's the solution:

vite.config.js

Remove 'resources/js/app.css' from vite.config.js

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

Add CSS to resources/js/app.js

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

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

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
window.Alpine = Alpine;

Alpine.plugin(focus);

Alpine.start();

Using @vite in views

Because our CSS is already imported into our app.js, we will only use

@vite('resources/js/app.js')

in our layout view files: app.blade.php and guest.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Styles -->
    @livewireStyles
    @vite('resources/js/app.js')
</head>

<body>
    <div class="font-sans text-gray-900 antialiased">
        {{ $slot }}
    </div>
</body>

</html>

Build your app

npm run build

Note:

Use php artisan optimize:clear for cache cleaning, if needed.