Django - CSS 文件未正确链接到模板答案

【问题标题】：Django - CSS file not linking with template correctlyDjango - CSS 文件未正确链接到模板
【发布时间】：2020-02-26 08:31:57
【问题描述】：

在我的项目中，我尝试将我的 html 模板链接到我的静态文件夹中的 CSS 文件。我已将 STATIC_ROOT、STATIC_URL 和 STATICFILES_DIRS 添加到我的 settings.py 中。

在我的 static 文件夹中，我有一个名为 styles 的文件夹，其中有一个名为 signup.css 的文件。我也跑了 python manage.py collectstatic。

在我的模板中，我尝试引用该 CSS 文件来更改我的 h1 的颜色，但是没有发生任何更改。

模板：

{% load static %}
    <head>
        <link rel="stylesheet" href="{% static 'styles/signup.css' %}">
    </head>
    <h1>YO</h1>
    <div id="signupformdiv">
        <form class="signupform" action="{% url 'signup' %}">

        </form>
    </div>

signup.css：

h1 {
    color: red;
}

我的 h1 的颜色仍然是黑色。有人知道这个问题吗？谢谢。

源代码：

<!doctype html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Instagram</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link href="/static/custom.css" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/static/favicon.ico" />
</head>

<body>
  <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">
    <h5 class="my-0 mr-md-auto font-weight-normal"><a class="text-dark">Instagram</a></h5>
    <nav class="my-2 my-md-0 mr-md-3">
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



    <head>
        <link rel="stylesheet" href="/static/styles/signup.css">
    </head>
    <h1>YO</h1>
    <div id="signupformdiv">
        <form class="signupform" action="/users/signup/">

        </form>
    </div>


</body>

</html>

浏览器中的错误： 加载资源失败：服务器响应状态为 404（未找到）

settings.py：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'instagram/static/')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

项目结构： instagram-project 是根目录，名为 instagram 的子文件夹，其中我有一个名为“静态”的文件夹

在根目录中，我有一个静态文件夹，所有静态文件都发送到该文件夹。

在用户应用程序中，我有一个名为模板的文件夹，其中存储了我的模板。

** BASE.HTML **

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Instagram</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">  <link rel="stylesheet" href="{% static 'styles/signup.css' %}">

  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />

</head>

【问题讨论】：

提供你的settings.py和整个django项目的目录树
能否请您显示使用View Page Source在您的浏览器中呈现的内容的源代码？
@aminrd 请查看我的原帖。
@aminrd 我已经在源代码中添加了。
您是否在另一个模板中使用此模板？因为这个文件中有两个<head></head>标签

标签： html css django django-templates

【解决方案1】：

问题是服务器找不到你的静态文件不是因为它们不存在，而是因为它们没有urlpattern，more info

# project urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = []
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

这应该可以解决

【讨论】：

一个问题。当我想编辑 CSS 文件时，我是在项目根目录下的 static 文件夹中编辑它，还是在我的 instagram 文件夹中的 static 文件夹中编辑它，然后运行 collectstatic？
其实我已经解决了。您必须编辑添加到 STATICFILES_DIRS 中的静态文件夹中的文件，然后您必须执行 collectstatic。
好吧，我没有及时看到评论，很高兴它成功了
顺便说一句，这不会在部署后发生，因为您将使用服务器来处理静态文件除了您的代码，比如图像和这些东西，也许您会使用一些东西像亚马逊 S3