django does not load CSS file in HTML-file which extends from "base.html"-CodePudding

I have a base.html which my options.html extends from like this

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

{% block content %}
<div >
    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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

the issue is that the CSS is not loaded/applied.

In the web-console (when I run python manage.py runserver) and go to the "options" page, then I can see that the webpage/base.css is loaded (i.e GET /static/webpage/base.css is printed), but the webpage/options.css is not.

I thought I had something wrong in the static- path, but if I move the

<link rel="stylesheet" type="text/css" href="{% static 'webpage/options.css' %}"> into my base.html(and go to my home page) then I see that GET /static/webpage/options.css is now printet and the css in there indeed takes effect.

Why can it be that it is not loaded in the options.html file? Note, this question is not about CSS changes not taking effect (untill hard-refresh, cache clear etc.) but it seems like the file simply isn't getting loaded

CodePudding user response：

According to the Template inheritance documentation, I believe that these three paragraphs explains everything.

All the block tag does is to tell the template engine that a child template may override those portions of the template.

The extends tag is the key here. It tells the template engine that this template “extends” another template. When the template system evaluates this template, first it locates the parent – in this case, “base.html”.

At that point, the template engine will notice the three block tags in base.html and replace those blocks with the contents of the child template.

So basically, when you extend a skeleton, only the parts inside the blocks are replaced, everything else is ignored.

In order to do what you want, you need another block inside your base.html header, and use it in your options.html.

CodePudding user response：

When an HTML file extends another, it needs all its content in blocks, that it can insert into the base.html - otherwise it doesn't know where to put it.

In this case you'd want to create something like

base.html

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

And then include that block in your options.html

{% block htmlhead %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'webpage/options.css' %}">     
{% endblock htmlhead %}