Django中继承base.html的options.html无法加载CSS文件

核心原因是你的options.html中引入CSS的代码没放在base.html定义的可填充block标签内。

Django模板继承的规则很明确：子模板里所有没被{% block %}包裹的内容，都会被父模板的内容完全覆盖，根本不会被渲染到最终页面里。而base.css能正常加载，是因为它本身就在base.html的渲染流程里（比如放在<head>标签内，或者某个已定义的block中）。

解决步骤 #

1. 先检查base.html的<head>部分，有没有预留用于扩展CSS的block，比如类似这样的代码：

   <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="{% static 'webpage/base.css' %}">
     <!-- 预留的扩展CSS区块 -->
     {% block extra_css %}{% endblock %}
   </head>
   

2. 如果有上面的extra_css（或其他命名的block），在options.html里把CSS引入代码放到这个block里：

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

3. 如果base.html没预留这类block，先在base.html的<head>里添加一个可扩展的block，再按上面的方式在子模板中填充内容。

为什么移到base.html就生效？ #

因为base.html是父模板，里面的所有代码都会直接参与页面渲染，不需要依赖模板继承的block规则，所以放在这里的CSS引入会被浏览器正常请求加载。

内容的提问来源于stack exchange，提问作者CutePoison