如何修复Django 4.2中CSS样式表MIME不匹配的控制台错误

个人网站此前样式显示正常，今日使用Django默认服务器加载时，离线/联网状态下样式均失效，Chrome、Edge、Firefox控制台均报2个MIME不匹配错误，访问样式表链接返回404。已尝试移除样式表注释、删除rel='stylesheet'属性，且查阅谷歌、Stack Overflow及官方文档的解决方案均无效。

相关代码片段 #

HTML头部代码 #

<head>
  {% block ex_head %} {% endblock %}
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link
    type="text/css"
    href="{% static 'stylesheets/main.css' %}"
    
    rel="stylesheet"
  />
  <link rel="shortcut icon" type="image/x-icon" href="/static/logo.png" />
  <title>Website Title</title>
  {% load static %}
  <script src="{% static 'blockly.min.js' %}"></script>
  <script src="{% static 'p5.min.js' %}"></script>
  <script src="{% static 'blockly_compressed.js' %}"></script>
  <script src="{% static 'blocks_compressed.js' %}"></script>
  <script src="{% static 'python_compressed.js' %}"></script>
  <script src="{% static 'en.js' %}"></script>
  <script src="{% static 'p5.js' %}"></script>
  <script src="{% static 'p5.dom.js' %}"></script>
  {% load bootstrap5 %} {% bootstrap_css %} {% bootstrap_javascript %}
  <style>
    body {
      font-family: "DefaultFont";
    }
    .margins {
      margin-left: 15px;
    }
    .margins-top {
      margin-top: 10px;
    }
    #blocklyDiv {
      height: 480px;
      width: 600px;
      background-color: aqua;
      position: absolute;
      top: 12%;
      margin-left: 15px;
    }
    #canvasDiv {
      height: 480px;
      width: 600px;
      position: absolute;
      left: 60%;
      color: black;
      border: 1px red ridge;
    }
  
  </style>

  {% block extra_style %} {% endblock %}
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
</head>

Settings.py静态配置 #

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static"
]

排查与修复步骤 #

• 调整{% load static %}位置：将{% load static %}移至<head>标签最顶部，确保所有使用{% static %}的标签之前加载该模板标签，否则模板无法解析{% static %}语法，导致生成无效的资源链接。
• 验证静态文件路径：确认static/stylesheets/main.css文件存在于项目根目录的static文件夹中，注意路径大小写（Linux/macOS系统区分大小写）。
• 确认开发环境静态服务：确保settings.py中DEBUG = True，Django开发服务器仅在DEBUG模式下自动处理静态文件。
• 清理浏览器缓存：按Ctrl+Shift+R强制刷新页面，避免浏览器缓存旧的无效资源地址。
• 定位MIME错误源：查看控制台报错详情，确认是哪个资源引发的MIME不匹配，检查文件是否损坏，或服务器返回的Content-Type响应头是否正确。
• 统一静态资源引用方式：将favicon的硬编码链接/static/logo.png改为{% static 'logo.png' %}，避免路径不一致问题。
• 移除重复加载的JS文件：代码中同时加载了p5.min.js与p5.js、blockly.min.js与blockly_compressed.js，重复加载可能引发冲突，建议保留压缩版本（如*.min.js或*_compressed.js）即可。

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