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

Question

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

3.9k Views Asked by Md Rameez Rana At 19 April 2025 at 05:30

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.

Original Q&A

There are 2 best solutions below

Damian Chudobiński On 22 June 2023 at 08:17

Did you added them too into vite.config.js with corresponding path

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

export default defineConfig(
{
    plugins: [
        laravel({
            input: [
                'resources/admin/scss/style.scss',
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

**Md Rameez Rana** · Accepted Answer

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';`

Like

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 optimize:clear for cache cleaning, if needed.

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

There are 2 best solutions below

Related Questions in LARAVEL-BLADE

Related Questions in LARAVEL-9

Related Questions in LARAVEL-LIVEWIRE

Related Questions in LARAVEL-AUTHENTICATION

Related Questions in LARAVEL-VITE

Trending Questions

Popular # Hahtags

Popular Questions