Seeking a solution for incorporating multiple CSS files for different templates using Django template inheritance.
Currently, I have extended my base.html template with another app's template. Now, I want to use separate CSS files for each app's HTML templates (one app = 1x HTML, 1x JS, 1x CSS). However, when including the template within the template tag, it replaces the CSS file from the base.html and causes a site crash.
How can one add a second CSS file into an extended HTML template that only affects the extended part without touching the base.html?
Your guidance is highly appreciated in advance.
Extended HTML template causing site crash due to replacement of base.css file:
{% extends 'templates/base.html' %}
{% load static %}
{% block head_css_site %}
<link href="{% static 'Quotes_app.css' %}" rel="stylesheet" type="text/css">
{% endblock head_css_site %}
{% block content %}
<h1>Test</h1>
{% endblock %}
{% block footer_javascript_site %}
<script src="{% static 'Quotes_app.js' %}"></script>
{% endblock footer_javascript_site %}
base.html:
{# HTML5 declaration #}
<!DOCTYPE html>
{% load static %}
<html>
{# Make modifiable head elements #}
<head>
<title>{% block title %} {% endblock title %} DASHEX </title>
{% block head_favicon %}
<link rel="icon" type="image/png" href="{{ STATIC_URL }}images/logo.jpg">
{% endblock head_favicon %}
{% block head_meta %}
{% block head_meta_charset %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% endblock head_meta_charset %}
{% block head_meta_contentlanguage %}
<meta http-equiv="Content-Language" value="en-US" />
{% endblock head_meta_contentlanguage %}
{% block head_meta_viewport %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% endblock head_meta_viewport %}
{% endblock head_meta %}
{% block css %}
{% block head_css_site %}
<link href="{% static 'base.css' %}" rel="stylesheet" type="text/css">
{% endblock head_css_site %}
{% endblock css %}
</head>
[...]
Project Structure: