How to Solve Error Message where static file css is not loaded in Django

By Posted on

Introduction

This article is discussing on how to solve an error message. That error message is informing that the static file with the css format file is not loaded. This is actually happening after executing a Django web-based application framework. The following is the actual execution command for starting or running a Django web-based application framework : 

(myenv) C:\python-win\user_project>python manage.py runserver 7000
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
May 17, 2020 - 08:53:45
Django version 3.0.5, using settings 'user_project.settings'
Starting development server at http://127.0.0.1:7000/
Quit the server with CTRL-BREAK.
[17/May/2020 08:53:49] "GET /app/about/ HTTP/1.1" 200 3437
[17/May/2020 08:53:49] "GET /static/user/main.css HTTP/1.1" 404 1665

As in the above output command execution, there is an information about how the css file is failing to load. The following is that line of information : 

[17/May/2020 08:53:49] "GET /static/user/main.css HTTP/1.1" 404 1665

In the end of the information bouat loading the css file, there is a HTML code of 404. It is indicating that the file with the name ‘main.css’ is no where to be found. It is also pointing the exact location where the ‘main.css’ is being extracted. Basically, the following is the step for loading a css static file :

1. Create a static folder inside the app folder. The following is the actual structure showing where is the static folder exists : 

C:\python-win\project>tree .
Folder PATH listing for volume Windows
Volume serial number is xxxxxxxxx
C:\PYTHON-WIN\USER_PROJECT
├───app
│   ├───migrations
│   │   └───__pycache__
│   ├───static
│   ├───templates
│   │   └───app
│   │       └───static
│   └───__pycache__
└───project
    └───__pycache__
C:\python-win\project>

2. Create a css file inside the static folder.

3. Add the following line in the first line inside the base template to load the static files as follows : 

{% load static %}
<!DOCTYPE html>
<html>
....

Solution

Apparently, it is not working and it generates the output above informing that the file with the name ‘main.css’ fail to load. But there is actually a hint on the information, it is actually informing the exact location where the ‘main’css’ is going to be used. It is in ‘static/user/main.css’. So, adjust the path or the location of the ‘main.css’ file. For the solution, just create a folder with the name of ‘app’ inside the static folder. So, the structure of the project will be as follows : 

C:\python-win\project>tree .
Folder PATH listing for volume Windows
Volume serial number is xxxxxxxxx
C:\PYTHON-WIN\USER_PROJECT
├───app
│   ├───migrations
│   │   └───__pycache__
│   ├───static
│   ├───templates
│   │   └───app
│   │       └───static
│   └───__pycache__
└───project
    └───__pycache__
C:\python-win\project>

Just reload or refresh the page again. The following output will show : 

(myenv) C:\python-win\user_project>python manage.py runserver 7000
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
May 17, 2020 - 08:53:45
Django version 3.0.5, using settings 'user_project.settings'
Starting development server at http://127.0.0.1:7000/
Quit the server with CTRL-BREAK.
[17/May/2020 08:53:49] "GET /app/about/ HTTP/1.1" 200 3437
[17/May/2020 08:53:49] "GET /static/app/main.css HTTP/1.1" 404 1665
[17/May/2020 08:56:25] "GET /app/about/ HTTP/1.1" 200 3437
[17/May/2020 08:56:25] "GET /static/app/main.css HTTP/1.1" 200 1373
Not Found: /favicon.ico

Apparently, there is an information on the last line of the command execution. It is finally informing that the file with the name of ‘main.css’ is successfully loaded. So, the layout of the application will be adjusted accordingly.

Leave a Reply