我的视图不包括刀片模板的 CSS - laravel 8
Posted
技术标签:
【中文标题】我的视图不包括刀片模板的 CSS - laravel 8【英文标题】：My View doesn't include the CSS of the blade template - laravel 8 【发布时间】：2021-11-30 01:52:30 【问题描述】：我想制作一个 CRUD 页面来编辑用户的数据。但是，好像很别扭。因为它不使用任何样式表，即使我使用@extend('layouts.main')
这是 layouts 目录中 main.blade.php 的代码：
<!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>
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>
这是 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
这是屏幕截图： enter image description here 请帮帮我，我真的不知道该怎么办。
【问题讨论】：
href="css/app.css"会将/css/app.css 附加到整个当前域。添加 / : href="/css/app.css" 甚至更好的 asset("css/app.css") 这样它只会将其附加到基本 url
【参考方案1】：
在所有资产文件中使用asset() 函数，例如：css、js 和图像。
<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>
【讨论】：
以上是关于我的视图不包括刀片模板的 CSS - laravel 8的主要内容，如果未能解决你的问题，请参考以下文章