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

Question

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.

Rana Muhammad Rameez · Accepted Answer · 2025-02-05 08:24:03Z

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

Mortgage1 · Accepted Answer · 2024-06-11 08:06:04Z

2

Removing a file named "Hot" which contained my dev ip, worked for me

answered Jun 11, 2024 at 8:06

Mortgage1

451 gold badge1 silver badge8 bronze badges

Comments

Damian Chudobiński · Accepted Answer · 2023-06-22 08:17:14Z

0

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,
        }),
    ],
});

answered Jun 22, 2023 at 8:17

Damian Chudobiński

6108 silver badges20 bronze badges

1 Comment

Rana Muhammad Rameez Over a year ago

Yes

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

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related