How to fix Console Error "CSS Stylesheet not loaded due to 'text/html' MIME mismatch" in Django 4.2?
I was just working on my website, and everyday the grand stylings worked fine and everything was up to good shape. But today, I went on Chrome and loaded my website first offline using the Django default server and it showed no styles, and I thought that it was just a WIFI issue. Once I connected, I saw the stylings didn't change and there are 2 MIME errors in my consoles for all the 3 browsers I tried it with (Microsoft Edge, Firefox, and Chrome). My static directories are setup properly, but for some reason when I tried to visit the stylesheet link to get a CSS file, I got 404 instead. I really don't know why this is happening.
I tried doing some simple changes to my stylesheet, like removing any comments, and I even removed the rel='stylesheet' attribute to see what happened. Nothing worked. I went and did many Google searches, and even used the AI preview there, browsed through Stack Overflow, and read the documentation. I tried all their recommendations but nothing worked. Here is the code snippet for my tags and static setup in settings.py.
<!-- HTML HEAD -->
<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 Setup
STATIC_URL = 'static/'
STATIC_ROOT = BASE_DIR / "static"
If you need more code snippets, just ask for one via comment.