CSS not loading wrong MIME type Django [duplicate]

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

Gouge

Possible dublicate of #22839778 – Wite

Answer 1

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

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

Wite

Thanks, that worked ! but why I am having this issue only on some PCs ? – Gouge

Because that's related to incorrect association of css file on OS base, after adding lines in answer above all css files should be associated correctly. Also you can take a look on accepted answer of source i've pointed to. Have a nice day )! – Wite

Man, this was driving me crazy. The app worked fine on my Windows 10 laptop, but did not serve the status assets correctly on my desktop at work. This fixed the problem!! – Grindle

This didn't help me at all, I use Windows 7. Running it under virtual environment. – Kampong

he path is correct and verified with Pycharm. It was placed in settings.pu import mimetypes mimetypes.add_type ("text / css", ".css", true) STATIC_URL = '/ static /' But it still doesn't load the link. – Abecedarian

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.

Wednesday

How can one avoid this error during production with DEBUG=False? – Dacy

I did set up the debug mode on True, but still no success. I have developed my question there. Thanks for your help! – Hexangular

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

Medeah

My problem was in production, trying to host Django app on a shared hosting, whitenoise did the magic. – Crouton

This fixed it for me as well on Railway.app – Prajna

It worked like a charm, on render.com app. Thank you very much... – Tendance

Thanks. Added mime types didn't work but after this worked perfectly. – Hemistich

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)

Uranology

so this should only be used in development? – Deach

This is a fix for development issues, and should not affect your Prod config – Uranology

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

Soho

how did you solve for text/html mimetype issue? – Delinquent

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.

Chemarin

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

Nucleate

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

Kealey

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

Devi

Answer 10

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

Lingwood