Having recently started using Django, I encountered an issue with loading CSS files. This is the directory structure in my Windows system:
Scenario 1:
.
|__myproject
|__+myproject
|__+myapp
|__-static
| |__-css
| |__style.css
|__-templates
|__base.html
In base.html:
<!DOCTYPE html>
{% load static %}
<html>
<head>
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
</head>
<body>
# ...
</body>
</html>
In settings.py:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR, "templates")
STATICFILES_DIR = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATICFILES_DIR,
]
INSTALLED_APPS = [
# ...
'django.contrib.staticfiles',
# ...
]
TEMPLATES = [
{
# ...
'DIRS': [TEMPLATE_DIR,],
# ...
},
]
Despite these settings and configurations, the CSS file cannot be loaded.
However, upon changing the directory tree to the following:
Scenario 2:
.
|__+myproject
|__+myapp
|__-static
| |__style.css
|__-templates
|__base.html
In base.html:
# ...
<link rel="stylesheet" href="{% static 'style.css' %}" type="text/css">
# ...
Now it works perfectly fine.
What exactly was causing the issue in scenario 1? What was missing in that setup?