当我在 Django 中使用“扩展”和“阻止”时，我的 CSS 没有出现答案

【问题标题】：My CSS does not appear when I use "extend" and "block" in Django当我在 Django 中使用“扩展”和“阻止”时，我的 CSS 没有出现
【发布时间】：2021-01-11 19:29:59
【问题描述】：

我花了半天时间试图弄清楚这一点。我最终通过 HTML 样式属性传递了 CSS。我做了什么并尝试了什么：

在 settings.py 中包含：

   django.contrib.staticfiles
   STATIC_URL = '/static/'

在 layout.html 中：

   {% load static %}
   <link href="{% static 'auctions/styles.css' %}" rel="stylesheet">

静态文件夹按以下方式组织：

app_name/static/auctions/styles.css 4. 并扩展布局并填充body块

我已尝试在顶部添加{% load static %}；
之后我已经输入了<link href="{% static 'auctions/styles.css' %}" rel="stylesheet">并重新启动了服务器，但这一切都无济于事；模板：

{% extends "auctions/layout.html" %} 
{% load humanize %}
{% load crispy_forms_tags %}

{% block body %}

    {% if listing.closed == True %}
        <div style="background-color: whitesmoke; height: 110%; width: 100%; position: absolute; opacity: 0.6; z-index: 2;">
            <div style="margin-top: 30%; font-size: xxx-large;">
                <center>
                    <strong>
                        This listing is closed. <br>
                        <p style="color: green;">{% if request.user == winner.user %} You ({{ winner.user }}) have Won the auction! Congrats! {% endif %}</p>
                    </strong>
                </center>
            </div>
        </div>
    {% endif %}
    {% if error_check == True %}
        <div class="alert alert-warning" role="alert">
            <center>
                Your bid is lower than the current bid! Try with a higher one.
            </center>
        </div>
    {% elif error_check == False %}
        <div class="alert alert-success" role="alert">
            <center>
                Your bid was successfully placed!
            </center>
        </div>
    {% endif %}
    <div>
        <div>
            {% if button %}
                <form method="POST" action="{% url 'view_list' listing.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="close_list" value="True">
                    <input type="submit" class="btn btn-success" value="Close the Auction">
                </form>
            {% endif %}
        </div>
        <div>
            {% if not watchlisted or watchlisted.watchlist == False %}
                <form method="POST" action="{% url 'view_list' listing.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="watchlist_add" value="True">
                    <input type="submit" class="btn btn-primary" value="Add to Watchlist">
                </form>
            {% else %}
                <form method="POST" action="{% url 'view_list' listing.id %}">
                    {% csrf_token %}
                    <input type="hidden" name="watchlist_add" value="False">
                    <input type="submit" class="btn btn-primary" value="Remove from Watchlist">
                </form>
            {% endif %}
        </div>
        <h3>Listing: {{ listing.title }}</h3>
        <img src="{{ listing.image }}" alt="Listings' Images">
        <p>{{ listing.description }}</p>
        {% if not bid %}
            <strong>${{ listing.price|stringformat:"1.2f" }}</strong>
        {% else %}
            <strong>${{ bid|stringformat:"1.2f" }}</strong>
        {% endif %}
        
        <p> {{ total_bids }} bid(s) so far. {% if bid_user %} {{ bid_user }} {% endif %}</p>
        <form method="POST" name="bidding" action="{% url 'view_list' listing.id %}">
            {% csrf_token %}
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                </div>   
                <div style="margin: 0; padding: 0 2px; height: 6px; z-index: 1;">
                    {% crispy form %}
                </div>   
                <div class="input-group-append" >
                    <span class="input-group-text">.00</span>
                </div>
                <input type="submit" class="btn btn-primary" value="Place Bid">
            </div>
        </form>
        <div style="width: 222;">
            <form action="{% url 'view_list' listing.id %}" name="comment" method="POST">
                <input type="submit" class="btn btn-secondary btn-sm" value="Comment">
                {% crispy comment %}
                
            </form>
            <div>
                {% for c in comments %}
                    <ul>{{ c.user }}: {{ c.comment }} {{c.created_at}}</ul> 
                {% empty %}
                    No comments yet.
                {% endfor %}
            </div>
        </div>

        <h4>Details</h4>
            <li>Listed by: {{ listing.user }} </li>
            <li>Category: {{ listing.category }} </li>
            <li>Listing created at: {{ listing.created_at }} </li>
    </div>

{% endblock %}

【问题讨论】：

您可能会覆盖包含您的 css 声明的 layout.html 的头块
如果您使用DEBUG = False 运行，则需要运行collectstatic。可能不是你的问题，但值得一提以防万一:)
我没有设置STATIC_ROOT 并运行collectstatic，但我不明白为什么要设置，因为建议用于开发环境..？
如果您使用DEBUG=True 进行开发，则不需要collectstatic，不需要。只是想检查一下这不是问题:)
顺便说一句，您的文件夹结构有点混乱 - MY_APP 是指根 django 项目文件夹还是当前应用程序？在应用程序中，您应该构造为app_name/static/app_name/<files>，然后访问为{% static 'app_name/<file>' %}

标签： html css django django-templates

【解决方案1】：

在您的 main_urls 中确保包含以下内容

from django.contrib.staticfiles.urls import static,staticfiles_urlpatterns
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL,document_root=settings.STATICFILES_DIRS)

这告诉 django 在给定 url 中寻找静态文件以获取静态文件

【讨论】：

【解决方案2】：

问题出在浏览器上，尤其是缓存...

【讨论】：