CSS static file is not loading in Django

Question

I am learning Django and i tried to implement a blog app . i am getting an error while using the static files inside project.i know, There are lot of questions with the same title. But i tried every way, still its not rendering the css file on the browser.

Folder structure:

firstBlog is the project name. blog is the app inside firstBlog. allstaticfiles is the STATIC_ROOT location. static is the folder for stroing the static contents. templates for storing the respective app's templates.

Here are some of my codes :

settings.py

STATIC_URL = '/static_files/'

STATICFILES_DIRS = [
     os.path.join(BASE_DIR, "static"),
     '/Django/projects/project1/project1/firstBlog/static',
]
#print(os.path.exists(os.path.join(BASE_DIR,'static'))) ----------------TRUE

STATIC_ROOT=os.path.join(BASE_DIR, "allstaticfiles")

Base.html

i have used the {% load static %} and for laoding the css i have set the href attribute as below.

<link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' % }">

Few things to consider :

1. when i am viewing my page on browser, its giving me error on console which is probably due to some path issue.

127.0.0.1/:1 Refused to apply style from 'http://127.0.0.1:8000/blog/%7B%%20static%20'blog/main.css'%20%%20%7D' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

2. When i am viewing the style from the localhost link i.e, http://127.0.0.1:8000/blog/static_files/blog/main.css, its working.

3. when i am checking the view source of the page and then clicking on the href link , it's not loading the css file.

4. Folder structure : C:\Users\tedd\OneDrive\Django\projects\project1\project1\firstBlog\static

Answer 1

Note this out: Keeping Debug = False in your local might cause the error of css not loading. Change Debug = True to run your css in local with django.

Answer 2

I'll try to help, but I'm not an expert!

The reason why http://127.0.0.1:8000/blog/static_files/blog/main.css is working is because you are accessing the main.css file directly. I would assume that your <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' % }"> is not pointing to the correct directory.

I looked at the documentation and it seems that your folder structure is not formed in the correct way. Here is a template for how everything should be structured:

[projectname]/                  <- project root
??? [projectname]/              <- Django root
?   ??? __init__.py
?   ??? settings/
?   ?   ??? common.py
?   ?   ??? development.py
?   ?   ??? i18n.py
?   ?   ??? __init__.py
?   ?   ??? production.py
?   ??? urls.py
?   ??? wsgi.py
??? apps/
?   ??? __init__.py
??? configs/
?   ??? apache2_vhost.sample
?   ??? README
??? doc/
?   ??? Makefile
?   ??? source/
?       ??? *snap*
??? manage.py
??? README.rst
??? run/
?   ??? media/
?   ?   ??? README
?   ??? README
?   ??? static/
?       ??? README
??? static/
?   ??? README
??? templates/
    ??? base.html
    ??? core
    ?   ??? login.html
    ??? README

On the screenshot that you provided it looks as if your templates folder is inside the django root instead of the project root. That's important, because it will be searching for your .css in the wrong place.

I encourage you to try fixing the directories and then instead of using href="{% static 'blog/main.css' % }"> simply use href="css/style.css".

Please notice that it's css/style.css instead of style.css. In your templates folder, you can create a folder called css and then store all of the .css files in there. Then you can simply point to the css folder with href="css/style.css".

This should work as a temporary solution until someone more knowledgable can give you the correct answer.

EDIT: Your base.html should be in the templates folder also! So: project_root/templates (insert base.html here) /css/ (insert your .css here(

Answer 3

"whitenoise" can solve "MIME type" error then CSS is loaded:

First, install "whitenoise":

pip install whitenoise

Then, add it to "MIDDLEWARE" in "settings.py". That's it. Finally, CSS is loaded:

MIDDLEWARE = [
    # ...
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware", # Here
    # ...
]