HTML 没有在 Django 中加载 CSS答案

【问题标题】：HTML not loading CSS in DjangoHTML 没有在 Django 中加载 CSS
【发布时间】：2021-09-07 00:42:42
【问题描述】：

我的 HTML 代码无法加载我的 css 文件时遇到问题。如果将代码放入 main.html 标记，则该代码可以工作，但是外包给单独的 css 文件，则根本无法工作。

项目链接：https://github.com/Svantevith/Python/tree/master/ToDoList

文件夹的整体结构：

main.html的head标签：

<head>
    <title>ToDoList App</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> -->
    <link id="sheet-theme" rel="stylesheet" type="text/css" href="light.css"> 

    <!-- Nunito Font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
</head>

在我的 django 项目中，其余的 HTML 文件扩展了 main.html 文件，例如注册视图：

{% extends 'base/main.html' %}

{% block content %}

    <div class="header-bar">
        <h1>Register</h1>
    </div>

    <div class="card-body">
        <form method="POST">
            {% csrf_token %}
            {{form.as_p}}
            
            <input style="margin-top: 16px" class="button" type="submit" value="Register">
        </form>

        <p>Already have an account? <a id="plain" href="{% url 'login' %}">Login</a></p>
    </div>

{% endblock content %}

可能是什么问题？

编辑：如 cmets 和官方文档中所述，通过添加 base/static/base 文件夹并通过 {% static 'base/file.css' %} 访问 css 解决了问题；）

【问题讨论】：

查看文档：docs.djangoproject.com/en/3.2/howto/static-files
这能回答你的问题吗？ CSS is not working in Django app, no clue what is wrong
接受解决问题的答案，而不是编辑解决方案。如果您解决了自己的问题，请自己写一个答案并接受它。除此之外，这个问题看起来很好而且很清楚。也许更彻底地搜索现有的重复项......（或文档）;-)
@ChrisWesseling，答案实际上是评论。不幸的是，我无法将其标记为最佳答案
然后你可以轻推评论者写下答案，这样他们就可以获得功劳。或者做 Rayyan Shaikh 所做的事情：自己写答案（将其标记为社区 wiki），然后将其标记为已接受。我们不想占用人们用已经有答案的问题来回答问题的注意力。结束问题有助于解决这个问题。

标签： javascript python html css django

【解决方案1】：

您只需将 {% load static %} 放在 main.html 代码的顶部

在 Head 部分，您应该像我在 href 中所做的那样更改链接。

<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static 'light.css'%}">

【讨论】：

【解决方案2】：

您的href="light.css" 是这里的问题。系统正在您所在的主文件夹中查找该文件。您必须告诉系统使用 Jinja 语法转到 template 文件夹中的 base 文件夹。您的链接应该是

<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static light.css %}">

【讨论】：