为啥我的 app.css 不想显示结果？
Posted
技术标签:
【中文标题】为啥我的 app.css 不想显示结果？【英文标题】：Why my app.css does not want to show the result?为什么我的 app.css 不想显示结果？ 【发布时间】：2021-12-21 00:46:08 【问题描述】：我有一个 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>
【问题讨论】：
我能知道您的文件和文件夹结构名称只与 html 和 css 有关吗 @SrinivasMurthy.N.A 是的，检查这个bitbucket.org/Igor_Pysak/teacher/src/main 【参考方案1】：建议：
在浏览器中打开页面并CTRL U 以查看页面源代码。
单击css 文件并确保它被正确加载。您可能将其指向错误的目录。
如果您的资产位于 public/css 文件夹中，则可以使用 asset 函数正确引用您的资产
<link href=" asset('css/app.css') " rel="stylesheet" />
【讨论】：
由于某种原因有不同的代码 有了这些信息，现在您可以轻松调试并知道问题出在哪里。【参考方案2】：您应该将您的 CSS 路径文件更新为 ../../public/css/app.css
../：表示从当前位置转到上一个文件夹（这里是chat.blade.php）
【讨论】：
以上是关于为啥我的 app.css 不想显示结果？的主要内容，如果未能解决你的问题，请参考以下文章