DEBUG=True时如何优雅覆盖Bootstrap导航栏CSS（仅开发环境）

方案一：模板层直接通过DEBUG状态切换样式 #

Django模板默认可直接访问debug变量（只要没移除django.template.context_processors.debug上下文处理器，默认是开启的），直接在导航栏的类名里做条件判断：

<nav class="navbar navbar-expand-lg {% if debug %}navbar-danger{% else %}navbar-primary{% endif %}">
  <!-- 导航栏内容 -->
</nav>

如果需要自定义红色而非用Bootstrap的danger类，就加条件内联样式：

{% if debug %}
<style>
  .navbar {
    background-color: #dc3545 !important; /* 自定义红色，覆盖默认蓝色 */
  }
</style>
{% endif %}

这个方法最直接，仅需修改一次base模板，所有继承该模板的页面都会自动生效，完全不用改动视图层，完美符合DRY原则。

方案二：条件加载独立的开发环境样式文件 #

把开发环境的导航栏样式单独写在一个CSS文件里，再在base模板里根据DEBUG状态加载：

1. 在静态文件目录创建css/dev-navbar.css，内容如下：

.navbar {
  background-color: #dc3545 !important;
}

2. 在base模板里加载静态文件时加判断：

{% load static %}
<!-- 加载基础Bootstrap样式 -->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<!-- 开发环境才加载导航栏覆盖样式 -->
{% if debug %}
<link rel="stylesheet" href="{% static 'css/dev-navbar.css' %}">
{% endif %}

这个方案把样式逻辑和模板分离，更符合前端开发规范，同样只需修改一次base模板，所有页面自动应用，无重复代码。

为什么这两个方案更优？ #

• 不用全局重写get_context_data()，也不用给所有视图加新基类，完全避免重复代码；
• 逻辑集中在base模板或静态文件，维护更方便，后续调整样式或开关逻辑，仅需修改一处。

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