My View doesn't include the CSS of the blade template

I want to make a CRUD page for edit user's data. But, it seems awkward. Because it doesn't use any stylesheet, Even I use @extend('layouts.main')

here's the code of main.blade.php in layouts directory:

<!DOCTYPE html>
<html lang="en" class="light">
    <!-- BEGIN: Head -->
    <title>@yield('title','Auto \'Ilan - Best Way to Broadcast')</title>
    @include('layouts.head')
    <!-- END: Head -->
    <body class="main">
        <!-- BEGIN: Mobile Menu -->
        @include('layouts.mobilemenu')
        <!-- END: Mobile Menu -->
        <!-- BEGIN: Top Bar -->
        @include('layouts.topbar')
        <!-- END: Top Bar -->
        <div class="wrapper">
            <div class="wrapper-box">
                <!-- BEGIN: Side Menu -->
                @include('layouts.sidemenu')
                <!-- END: Side Menu -->
                <!-- BEGIN: Content -->
               @yield('content')
                <!-- END: Content -->
            </div>
        </div>
        <!-- BEGIN: JS Assets-->
        <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=["your-google-map-api"]&libraries=places"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data-10-year-range.min.js"></script>
        <script src="js/adzan/Adhan.js"></script>
        <script src="js/app.js"></script>
        <!-- END: JS Assets-->
    </body>
</html>

Here's the code of head.blade.php:

<head>
    <meta charset="utf-8">
    <link href="images/logo.svg" rel="shortcut icon">
    <title>Dashboard</title>
    <!-- BEGIN: CSS Assets-->
    <link rel="stylesheet" href="css/app.css" />
    <!-- END: CSS Assets-->
</head>

here's the code of userupdate.blade.php:

@extends('layouts.main')
@section('title','Add User Form - Auto \'Ilan')
@section('content')
<div class="content">
    <div class="intro-y flex items-center mt-8 p-2">
        <h2 class="text-lg font-medium mr-auto">
            Tambahkan Pengguna
        </h2>
    </div>
    <div class="intro-y col-span-12 lg:col-span-6">
        <!-- BEGIN: Form Layout -->
        <form action="{{ route('updateuser') }}" method="POST">
            @csrf
            @method('PUT')
            <div class="intro-y box p-5">
                <div>
                    <label for="role" class="form-label pt-2 pb-1">Pilih Role Akun</label>
                    <select class="form-select mt-2 sm:mr-2" name="role" id="role">
                        <option value="ospeta">OSPETA</option>
                        <option value="staf">Guru dan Staff</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
                <div>
                    <div class="mt-3"> <label for="name" class="form-label">Nama Kepemilikan</label> <input name="name" id="name" type="text" class="form-control" placeholder="Nama Pemilik Akun (opsional)" value="{{ $users->name }}"></div>
                </div>
                <div class="mt-3">
                    <div class="mt-3"> <label for="email" class="form-label">Email</label> <input id="email" name="email" type="email" class="form-control" placeholder="Masukan Email (opsional)" value="{{ $users->email }}"></div>
                </div>
                <div class="mt-3">
                    <div class="mt-3"> <label for="username" class="form-label">Username</label> <input id="username" name="username" type="text" class="form-control" placeholder="Pilih Nama Yang unik" value="{{ $users->username }}"></div>
                </div>
                <div class="mt-3">
                    <div class="mt-3"> <label for="password" class="form-label">Password</label> <input id="password" name="password" type="password" class="form-control" placeholder="Pilih Password yang Mudah Dihafal" value="{{ $users->password }}"></div>
                </div>
                <div class="text-right mt-5">
                    <button type="submit" class="btn btn-primary w-24">Simpan</button>
                </div>
            </div>
        </form>
        <!-- END: Form Layout -->
    </div>
</div>
@endsection

here's the screenshot: enter image description here Please help me, I really don't know what should I do.

CodePudding user response：

Use asset() function in your all asset files e.g: css, js & images.

<head>
    <meta charset="utf-8">
    <link href="{{ asset('images/logo.svg') }}" rel="shortcut icon">
    <title>Dashboard</title>
    <!-- BEGIN: CSS Assets-->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}" />
    <!-- END: CSS Assets-->
</head>