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">

Answer 1

Adding following snippet into settings.py file may fix your problem:

import mimetypes
mimetypes.add_type("text/css", ".css", True)

Answer 2

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.

Answer 3

"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
    # ...
]

Answer 4

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)

Answer 5

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

Answer 6

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.

Answer 7

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).

Answer 8

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'
}

Answer 9

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

Answer 10

Set DEBUG = TRUE, if you are in dev. You can later in production set it false.