Django无法加载CSS文件求助：新手静态资源配置遇阻

问题描述 #

我是Django应用开发新手，尝试给HTML页面添加CSS美化，但Web服务器上的HTML无法读取CSS文件，请求解决。

我的目录结构 #

web3/
├── home1/
│   ├── static/
│   │   └── home1/
│   │       └── style.css
│   ├── template/
│   │   └── home1/
│   │       └── home.html

HTML模板代码（home1/template/home1/home.html） #

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Kirby is the greatest</title>
  
   <!-- Link the CSS file -->
   <link rel="stylesheet" href="{% static 'home1/style.css'%}">
</head>
<body>
  <h1>Great Job</h1>
  <h2>Proud</h2>
</body>
</html>

views.py代码（home1/views.py） #

from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader

def hello_world(request):
    return HttpResponse("you did it")

def home(request):
    return render(request,"home1/home.html")

settings.py静态资源配置 #

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "home1/static",
]
# Define the directory where 'collectstatic' will place all static files for production
STATIC_ROOT = BASE_DIR / 'staticfiles'

# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

解决步骤 #

• 确认DEBUG模式开启：开发阶段把settings.py里的DEBUG = True，Django会自动处理静态文件的请求，不需要提前运行collectstatic命令。
• 验证STATICFILES_DIRS路径：检查BASE_DIR是否指向项目根目录（web3文件夹）。可以在settings.py里加一行print(BASE_DIR)，运行服务器时看控制台输出，确认路径是否正确。
• 清理模板冗余代码：移除HTML中重复的{% load static %}标签，模板开头已经加载过，head里的可以删掉，避免冗余。
• 检查静态文件路径拼写：确保模板里{% static 'home1/style.css' %}的路径和实际文件位置一致，注意大小写（Linux/macOS系统区分大小写）。
• 强制刷新浏览器缓存：按Ctrl + F5刷新页面，避免浏览器加载缓存的旧资源。
• 查看浏览器控制台排查：按F12打开开发者工具，切换到Network标签，刷新页面后查看style.css的请求状态。如果是404错误，说明路径配置有问题，对比请求URL和实际文件路径。
• 验证CSS文件内容：在style.css里添加测试样式，比如h1 { color: red; }，确认样式本身能生效，排除文件为空或语法错误的问题。
• 开发服务器无需额外URL配置：DEBUG=True时，Django默认会处理/static/开头的请求，不需要在urls.py里添加静态文件的路由配置。

内容的提问来源于stack exchange，提问作者Justin543543