'Mime Type Issue Loading CSS With Django App
I have a Django app hosted on Heroku, and my stylesheet isn't loading. Now I've taken the time to read the other questions on this issue, but I believe each situation is unique. Now the error is as follows:
Refused to apply style from 'https://mazzodjangoapp.herokuapp.com/static/blog/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The static directory is defined in my settings.py file as:
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
In my base.html file, my link tag looks like this:
<link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
Works locally. Why is it not loading up in the Heroku environment?
Solution 1:[1]
As per the Heroku guide for configuring Django apps, you need to use pip and install django_heroku
pip install django_heroku
Add it to your settings.py
import django_heroku
And finally, add this to the bottom of the settings.py file
django_heroku.settings(locals())
Solution 2:[2]
Using white noise in my project worked for me. since I had system errors and I couldn't install Django-Heroku.
Here is the link I used to set up my white noise.
Basically
Install white noise
pip install whitenoise
Add it to middleware
MIDDLEWARE = [ django.middleware.security.SecurityMiddleware', 'whitenoise.middleware.WhiteNoiseMiddleware', #... ]
and that's all. you then send your code to Heroku
Solution 3:[3]
make sure that DEBUG = False
in settings.py
Solution 4:[4]
You need to run $ python manage.py collectstatic
before pushing to Heroku.
Solution 5:[5]
"whitenoise" can solve "MIME type" error to load CSS successfully:
This is how you use "whitenoise":
First, install "whitenoise":
pip install whitenoise
Then, set it to "MIDDLEWARE" in "settings.py". That's it to load CSS successfully:
MIDDLEWARE = [
# ...
"django.middleware.security.SecurityMiddleware",
"whitenoise.middleware.WhiteNoiseMiddleware", # Here
# ...
]
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | TylerH |
Solution 2 | iamafasha |
Solution 3 | johnkavanagh |
Solution 4 | TylerH |
Solution 5 | Kai - Kazuya Ito |