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.