CSS not loading wrong MIME type Django
Question:
I have installed virtualenv in my localhost to run a django app with 1.8 version but when running it the css and js files doesn’t load.
I get
Resource interpreted as Stylesheet but transferred with MIME type application/x-css
I have tried some options but they don’t solve the issue either. I am running the same configuration on other PC and it works.
My HTML loads the css with :
<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css">
Answers:
Adding following snippet into settings.py file may fix your problem:
import mimetypes
mimetypes.add_type("text/css", ".css", True)
If you’re using Centos and having similar issues (mine were with svgs) then you might need to install the mailcap package if it doesn’t exist (as per this answer).
open your Chrome by F12 Developer Tool and check what you actually received. In my case, the CSS file actually redirected to another page. so MIME is text/html not text/css
If you happen to be using the Django whitenoise plugin, then the mimetypes module is not used, and you need to pass in a dictionary of custom types in settings.py:
WHITENOISE_MIMETYPES = {
'.xsl': 'application/xml'
}
I ran into this issue during development (production was using Nginx and serving from /static_cdn folder without any issues).
The solution came from the Django docs: https://docs.djangoproject.com/en/3.1/howto/static-files/#serving-static-files-during-development
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
In my case I only loaded
{% load static %}
in django and not added the
'{%static '<filename>'%}'
in hrefs when I added this the error’s gone
This particular behaviour varies between the development (DEBUG=True) and deployment environment (DEBUG=False).
So if you are developing locally with DEBUG=False there is a high chance of this error. But once deployed on any server it will work without any error. If you want to avoid this error during development set DEBUG=True.
"whitenoise" will solve "MIME type" error then CSS is loaded successfully:
First, install "whitenoise":
pip install whitenoise
Then, set it to "MIDDLEWARE" in "settings.py". Finally, CSS is loaded successfully:
MIDDLEWARE = [
# ...
"django.middleware.security.SecurityMiddleware",
"whitenoise.middleware.WhiteNoiseMiddleware", # Here
# ...
]
Access the CSS file directly. If you get a 404 error that is your answer, because Django serve you a text/html file when the browser expect text/css.
Try to fix your static files, and the problem is most likely solved.
Set DEBUG = TRUE, if you are in dev. You can later in production set it false.
I have installed virtualenv in my localhost to run a django app with 1.8 version but when running it the css and js files doesn’t load.
I get
Resource interpreted as Stylesheet but transferred with MIME type application/x-css
I have tried some options but they don’t solve the issue either. I am running the same configuration on other PC and it works.
My HTML loads the css with :
<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css">
Adding following snippet into settings.py file may fix your problem:
import mimetypes
mimetypes.add_type("text/css", ".css", True)
If you’re using Centos and having similar issues (mine were with svgs) then you might need to install the mailcap package if it doesn’t exist (as per this answer).
open your Chrome by F12 Developer Tool and check what you actually received. In my case, the CSS file actually redirected to another page. so MIME is text/html not text/css
If you happen to be using the Django whitenoise plugin, then the mimetypes module is not used, and you need to pass in a dictionary of custom types in settings.py:
WHITENOISE_MIMETYPES = {
'.xsl': 'application/xml'
}
I ran into this issue during development (production was using Nginx and serving from /static_cdn folder without any issues).
The solution came from the Django docs: https://docs.djangoproject.com/en/3.1/howto/static-files/#serving-static-files-during-development
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
In my case I only loaded
{% load static %}
in django and not added the
'{%static '<filename>'%}'
in hrefs when I added this the error’s gone
This particular behaviour varies between the development (DEBUG=True) and deployment environment (DEBUG=False).
So if you are developing locally with DEBUG=False there is a high chance of this error. But once deployed on any server it will work without any error. If you want to avoid this error during development set DEBUG=True.
"whitenoise" will solve "MIME type" error then CSS is loaded successfully:
First, install "whitenoise":
pip install whitenoise
Then, set it to "MIDDLEWARE" in "settings.py". Finally, CSS is loaded successfully:
MIDDLEWARE = [
# ...
"django.middleware.security.SecurityMiddleware",
"whitenoise.middleware.WhiteNoiseMiddleware", # Here
# ...
]
Access the CSS file directly. If you get a 404 error that is your answer, because Django serve you a text/html file when the browser expect text/css.
Try to fix your static files, and the problem is most likely solved.
Set DEBUG = TRUE, if you are in dev. You can later in production set it false.