如何解决Laravel 7:浏览器会看到已编译的CSS文件,但不会应用它们
问题:CSS已正确编译和链接,但未显示在页面中。
我在本地项目中使用Laravel 7.24。
app.scss
中的代码似乎已正确编译到public/css/app.css
中。
在我的视图<head>
中,我这样链接了样式表:<link href="{{ asset('css/app.css') }}" rel="stylesheet">
。在浏览器的“元素/检查器”选项卡中,其读数为<link href="http://localhost:8000/css/app.css" rel="stylesheet">
。添加可选属性type="text/css"
不会改变任何内容。
在Chrome中打开视图,页面在外观上没有应用CSS。查看开发工具的“网络”标签,其中列出了app.css,并显示net::ERR_INVALID_HTTP_RESPONSE
错误。
在Firefox中打开相同的文件,浏览器将忽略找到的第一个选择器,并应用其他所有内容。在开发工具的“网络”标签中,列出了app.css,但没有任何状态,但是我可以访问该文件并看到所有属性。在下面的示例中,h1
和p
均正确呈现,但是删除第一个.class
选择器会使h1呈现为黑色文本,且无删除线。 (.class
在我的视图中不存在,我只需要添加一些内容作为第一个选择器。)
.class {
color: purple;
}
h1 {
color: red;
text-decoration: line-through;
}
p {
color: blue;
text-decoration: underline;
}
我尝试清除缓存,但无济于事。
我可以直接在http://localhost:8000/css/app.css
上访问我的css文件,其中显示了我的属性以及这些行(据我所知,在行之有效的项目中也存在类似的行):
‹������
���������HTTP/1.1 200 OK
Host: localhost:8000
Date: Sun,30 Aug 2020 16:24:08 GMT
Connection: close
Content-Type: text/css; charset=UTF-8
Content-Length: 175
关于这种行为的原因有什么想法?
ETA:我找到了解决方法。使用命令php -S localhost:8000 -t public/
代替php artisan serve
解决了我的问题。
解决方法
因此,在运行npm run dev
之后,即使关闭了缓存,也看不到已应用的CSS?
您使用php artisan serve
还是xampp?
似乎php artisan serve
应该只用于快速入门,如果您真的想使用laravel,则应该设置一个真正的Apache服务器或类似的服务器。
经过一番摸索,我记得曾经被告知php artisan serve
有时会导致CSS出现问题,因此我四处寻找替代方法,而使用了php -S localhost:8000 -t public/
命令。那似乎解决了我的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。