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.

Md Rameez Rana
  • 37
  • 1
  • 8

2 Answers2

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,
        }),
    ],
});
Damian Chudobiński
  • 112
  • 1
  • 12
  • 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/**', ], }), ], }); ``` – Md Rameez Rana Jun 22 '23 at 11:59
0

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

Here's the solution:

  1. 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/**',
            ],
        }),
    ],
});
  1. 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();
  1. 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>
  1. Build your app

npm run build

Note:

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

Md Rameez Rana
  • 37
  • 1
  • 8