javascript - 为什么我的 app.css 不想显示结果?
问题描述
我有一个 HTML 页面(chat.blade.php)和一个 CSS 文件(app.css),由于某种原因,我的 CSS 代码在 PHP 运行 dev 命令后没有更改页面,可能是我没有正确编写路径在 HTML 文件中,请告诉我,因为我第一次使用 CSS。app.css(在资源文件夹中)
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Bicyclette', sans-serif;
}
body {
background-color: #EEE;
}
input, button {
appearance: none;
border: none;
outline: none;
background: none;
}
input {
display: block;
width: 100%;
background-color: #FFF;
padding: 12px 16px;
font-size: 18px;
color: #888;
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
display: flex;
padding-top: 128px;
padding-bottom: 32px;
background-color: #8C38FF;
background-image: linear-gradient(to bottom, #8C38FF, #6317ce);
align-items: center;
justify-content: flex-end;
flex-direction: column;
box-shadow: 0px 6px 12px rgba(0, 0 ,0 , 0.15);
padding-left: 16px;
padding-right: 16px;
}
h1 {
color: #FFF;
text-transform: uppercase;
text-align: center;
margin-bottom: 16px;
}
#username {
border-radius: 8px;
transition: 0.4s;
text-align: center;
}
#username:focus {
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
}
#messages {
flex: 1 1 0%;
overflow: scroll;
padding: 16px;
}
.message {
display: block;
width: 100%;
border-radius: 99px;
background-color: #FFF;
padding: 8px 16px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
font-weight: 400;
margin-bottom: 16px;
}
.message strong {
color: #8C38FF;
font-weight: 600;
}
#message_form {
display: flex;
}
#message_input {
flex: 1 1 0%;
}
#message_send {
appearance: none;
background-color: #8C38FF;
padding: 4px 8px;
color: #FFF;
text-transform: uppercase;
}
和我的chat.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Чат</title>
<link rel="stylesheet" href="./css/app.css">
</head>
<body>
<div class="app">
<header>
<h1>Чат</h1>
<input type="text" name="username" id="username" placeholder="Вкажіть ваше ім'я">
</header>
<div id="messages"></div>
<form id="message_form">
<input type="text" name="message" id="message_input" placeholder="Написати повідомлення...">
<button type="submit" id="message_send">Отправить сообщение</button>
</form>
</div>
<script src="./js/app.js"></script>
</body>
</html>
解决方案
建议:在浏览器中打开页面,CTRL U
查看页面源代码。单击该css
文件并确保它已正确加载。您可能将其指向错误的目录。
如果您在文件夹中有资产,则可以使用该功能public/css
正确引用您的资产asset
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
推荐阅读
- sql - MSSQL 从 d1 更新到 db 2
- linux - 在 ubuntu 20.04 中启动时自定义脚本失败
- sql - 如果在 oracle 中出现条件,则修改列值
- mule - Mulesoft 流处理入门
- docker - Docker-compose 如何在 windows/mac 中添加卷以保存来自 java 应用程序的日志
- c# - 如何使用 Azure 通知中心向特定 APNS 通知令牌发送通知
- asp.net-core - Asp.core JWT 和外部身份验证
- erlang - 在“下载 kerl”之后,在 Ubuntu 上通过 asdf 安装 Erlang 失败
- c++ - 如何在 Windows 10 上构建和运行 Vivek 的虚拟摄像头?
- elasticsearch - 如何在logstash中拆分文件名?