html - 在 Heroku 上部署时 CSS 无法正确应用
问题描述
CSS 在本地部署上看起来不错，但在我在 heroku 上部署后不起作用。我不知道为什么该应用程序似乎构建良好。我尝试重新排序 layout.html 中的 CSS 文件，并且还检查了页面元素。CSS 部分取自在线资源，所以我不完全理解。那里可能有问题吗？
编辑：查看heroku日志后，有以下（潜在的）错误，但仍然可以成功构建：
2020-06-27T05:24:16.000000+00:00 app[api]: Build started by user andychen2325@gmail.com
2020-06-27T05:24:42.966827+00:00 heroku[web.1]: Restarting
2020-06-27T05:24:42.997174+00:00 heroku[web.1]: State changed from up to starting
2020-06-27T05:24:42.747602+00:00 app[api]: Deploy 8fdfaf0d by user andychen2325@gmail.com
2020-06-27T05:24:42.747602+00:00 app[api]: Release v20 created by user andychen2325@gmail.com
2020-06-27T05:24:43.836147+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2020-06-27T05:24:43.868537+00:00 app[web.1]: [2020-06-27 05:24:43 +0000] [10] [INFO] Worker exiting (pid: 10)
2020-06-27T05:24:43.868657+00:00 app[web.1]: [2020-06-27 05:24:43 +0000] [4] [INFO] Handling signal: term
2020-06-27T05:24:43.869380+00:00 app[web.1]: [2020-06-27 05:24:43 +0000] [11] [INFO] Worker exiting (pid: 11)
2020-06-27T05:24:43.969359+00:00 app[web.1]: [2020-06-27 05:24:43 +0000] [4] [INFO] Shutting down: Master
2020-06-27T05:24:44.106016+00:00 heroku[web.1]: Process exited with status 0
2020-06-27T05:24:46.880088+00:00 heroku[web.1]: Starting process with command `gunicorn app:app`
2020-06-27T05:24:49.214390+00:00 heroku[web.1]: State changed from starting to up
2020-06-27T05:24:49.020261+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [4] [INFO] Starting gunicorn 20.0.4
2020-06-27T05:24:49.021350+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [4] [INFO] Listening at: http://0.0.0.0:42739 (4)
2020-06-27T05:24:49.021497+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [4] [INFO] Using worker: sync
2020-06-27T05:24:49.029508+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [10] [INFO] Booting worker with pid: 10
2020-06-27T05:24:49.116908+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [11] [INFO] Booting worker with pid: 11
2020-06-27T05:24:54.000000+00:00 app[api]: Build succeeded
CSS 文件：
/* @extend display-flex; */
display-flex, .display-flex, .display-flex-center, .signup-content, .signin-content, .social-login, .socials {
display: flex;
display: -webkit-flex; }
/* @extend list-type-ulli; */
list-type-ulli, .socials {
list-style-type: none;
margin: 0;
padding: 0; }
p {
margin-bottom: 0px;
font-size: 15px;
color: #777; }
h2 {
line-height: 1.66;
margin: 0;
padding: 0;
font-weight: bold;
color: #222;
font-family: Poppins;
font-size: 36px; }
.main {
background: #f8f8f8;
padding: 150px 0; }
.clear {
clear: both; }
body {
font-size: 13px;
line-height: 1.8;
color: #222;
background: #f8f8f8;
font-weight: 400;
font-family: Poppins; }
.container {
width: 900px;
background: #fff;
margin: 0 auto;
box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
-o-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
-ms-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-ms-border-radius: 20px; }
.display-flex {
justify-content: space-between;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
-o-justify-content: space-between;
-ms-justify-content: space-between;
align-items: center;
-moz-align-items: center;
-webkit-align-items: center;
-o-align-items: center;
-ms-align-items: center; }
.display-flex-center {
justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-o-justify-content: center;
-ms-justify-content: center;
align-items: center;
-moz-align-items: center;
-webkit-align-items: center;
-o-align-items: center;
-ms-align-items: center; }
.position-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); }
.signup {
margin-bottom: 150px; }
.signup-content {
padding: 75px 0; }
.signup-form, .signup-image, .signin-form, .signin-image {
width: 50%;
overflow: hidden; }
.signup-image {
margin: 0 55px; }
.form-title {
margin-bottom: 33px; }
.signup-image {
margin-top: 45px; }
.form-submit {
display: inline-block;
background: #6dabe4;
color: #fff;
border-bottom: none;
width: auto;
padding: 15px 39px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
margin-top: 25px;
cursor: pointer; }
.form-submit:hover {
background: #4292dc; }
#signin {
margin-top: 16px; }
.signup-image-link {
font-size: 14px;
color: #222;
display: block;
text-align: center; }
.term-service {
font-size: 13px;
color: #222; }
.signup-form {
margin-left: 75px;
margin-right: 75px;
padding-left: 34px; }
.register-form {
width: 100%; }
.form-group {
position: relative;
margin-bottom: 25px;
overflow: hidden; }
.form-group:last-child {
margin-bottom: 0px; }
.agree-term {
display: inline-block;
width: auto; }
label {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
color: #222; }
.label-agree-term {
position: relative;
top: 0%;
transform: translateY(0);
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-o-transform: translateY(0);
-ms-transform: translateY(0); }
.signin-content {
padding-top: 67px;
padding-bottom: 87px; }
.signin-form {
margin-right: 90px;
margin-left: 80px; }
.signin-image {
margin-left: 110px;
margin-right: 20px;
margin-top: 10px; }
@media screen and (max-width: 1200px) {
.container {
width: calc( 100% - 30px);
max-width: 100%; } }
@media screen and (min-width: 1024px) {
.container {
max-width: 1200px; } }
@media screen and (max-width: 768px) {
.signup-content, .signin-content {
flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-o-flex-direction: column;
-ms-flex-direction: column;
justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-o-justify-content: center;
-ms-justify-content: center; }
.signup-form {
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
/* box-sizing: border-box; */
padding: 0 30px; }
.signin-image {
margin-left: 0px;
margin-right: 0px;
margin-top: 50px;
order: 2;
-moz-order: 2;
-webkit-order: 2;
-o-order: 2;
-ms-order: 2; }
.signup-form, .signup-image, .signin-form, .signin-image {
width: auto; }
.form-button {
text-align: center; }
.signin-form {
order: 1;
-moz-order: 1;
-webkit-order: 1;
-o-order: 1;
-ms-order: 1;
margin-right: 0px;
margin-left: 0px;
padding: 0 30px; }
.form-title {
text-align: center; } }
.html 文件：
{% extends "layout.html" %}
{% block title %}
Login
{% endblock %}
{% block content %}
<div class="main">
<!-- Sing in Form -->
<section class="sign-in">
<div class="container">
<div class="signin-content">
<div class="signin-image">
<figure><img src="../static/loginimg.png" alt=""></figure>
</div>
<div class="signin-form">
<h2 class="form-title">Login or <a href="/register">Register</a></h2>
<form method="POST" class="register-form" id="login-form">
<div class="form-group">
<label for="user"><i class="fa fa-user"></i></label>
<input type="text" name="user" id="your_name" placeholder="Username or Email"/>
</div>
<div class="form-group">
<label for="pass"><i class="fa fa-lock"></i></label>
<input type="password" name="pass" id="your_pass" placeholder="Password"/>
</div>
<div class="form-group form-button">
<input type="submit" name="signin" id="signin" class="form-submit" value="Log in"/>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
{% endblock %}
解决方案
您没有在问题中包含您layout.html的问题，这可能是您的问题所在：您如何包含样式表？
不过，这条线有一条线索：
<img src="../static/loginimg.png" alt="">
提供这样的路径是不正确的，可能会导致此问题。以上应该使用该url_for功能，本质上是：
<img src="{{ url_for('static', filename='loginimg.png') }}" alt="">
确保以这种方式提供代码中的任何静态链接。 具体来说，样式表包括（又名<link href="...">在<head>您的 HTML 元素中）。
这也很容易通过浏览器开发工具（在网络选项卡上）进行诊断。加载损坏的 Heroku 应用程序，您可能会看到404任何需要修复的静态包含错误。
推荐阅读
- javascript - 添加错误值但不是正确值时显示未定义的内容
- reactjs - 将观察者从服务器转移到客户端
- spring - 无法在 Spring Batch 的执行上下文中添加 XMLStreamWriter 变量
- apache-kafka - Kafka - Broker：消息太大
- raspberry-pi - 关闭屏幕时隐藏默认监视器消息
- autodesk-forge - 使用 Workshared Cloud Model 时的 DesignAutomationHandler 调试工具异常
- jenkins-pipeline - 詹金斯管道发布汇合汇合宏
- git - 在特定提交时在脏目录中初始化 Git
- r - 更改 ggplot2 中的图例颜色
- reactjs - 将变量直接注入从 React-Apollo 传递的函数
组件而不是道具