Django не загружает файл CSS в HTML-файл, который расширяется из "base.html"

У меня есть base.html, из которого расширяется мой options.html следующим образом 

//options.html
{% extends "webpage/base.html" %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'webpage/options.css' %}">

{% block content %}
<div class="test">
    foo
</div>


{% endblock content %}

//base.html
{% load static %}
<!DOCTYPE html>
<html>
  <head>
    
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{% static 'webpage/base.css' %}">

    <!-- jQuery-->
    <script src="https://code.jquery.com/jquery-3.6.1.slim.js" integrity="sha256-tXm+sa1uzsbFnbXt8GJqsgi2Tw+m4BLGDof6eUPjbtk=" crossorigin="anonymous"></script>
    
    <title>:)</title>

</head>

<body>
 hello world


  {% block content %}
  {% endblock content %}


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

проблема в том, что CSS не загружается/применяется.

В веб-консоли (когда я запускаю python manage.py runserver) и перехожу на страницу "options", то вижу, что webpage/base.css загружается (т.е. GET /static/webpage/base.css печатается), а webpage/options.css нет.

Я думал, что у меня что-то не так в статическом пути, но если я перемещу

<link rel="stylesheet" type="text/css" href="{% static 'webpage/options.css' %}"> в моем base.html (и перейти на мою home страницу), то я вижу, что GET /static/webpage/options.css теперь печатается и css там действительно вступает в силу.

Почему может быть так, что он не загружается в файл options.html? Обратите внимание, этот вопрос не о том, что изменения CSS не вступают в силу (пока не обновится, не очистится кэш и т.д.), а о том, что файл просто не загружается

Согласно документации по наследованию шаблонов, я считаю, что эти три абзаца объясняют все.

Все, что делает тег block, это сообщает шаблонизатору, что дочерний шаблон может переопределять эти части шаблона. может переопределять эти части шаблона.

Ключевым здесь является тег extends. Он сообщает шаблонизатору, что этот шаблон "расширяет" другой шаблон. Когда система шаблонов оценивает этот шаблон, сначала он находит родителя - в данном случае, "base.html".

В этот момент шаблонизатор заметит три блочных тега в base.html и заменит эти блоки содержимым дочернего шаблона шаблона.

По сути, когда вы расширяете скелет, заменяются только части внутри блоков, все остальное игнорируется.

Чтобы сделать то, что вы хотите, вам нужен другой блок внутри заголовка base.html, и использовать его в вашем options.html.

Когда HTML-файл расширяет другой, ему нужно, чтобы все его содержимое было в блоках, которые он может вставить в base.html - иначе он не знает, куда его поместить.

В этом случае вы захотите создать что-то вроде

base.html

<head>
...
{% block htmlhead %}
{% endblock htmlhead %}
</head>

А затем включите этот блок в свой файл options.html

{% block htmlhead %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'webpage/options.css' %}">     
{% endblock htmlhead %}
Вернуться на верх