Django项目页面加载时static目录下CSS静态文件未生效问题求助

修正方案 #

1. 修复HTML模板静态资源引用错误

你的link标签存在两处语法错误：href属性后缺少等号，同时静态资源路径填写错误。Django会自动扫描每个注册APP下的static目录，无需在路径中重复写APP名和static目录名，同时路径统一使用正斜杠。
修正后的css_practice.html代码如下：

<!DOCTYPE html>
{% load static %}
<html>
<head>
    <link type="text/css" rel="stylesheet" href="{% static 'ok.css' %}">
    <title>Page Title</title>
</head>
<body>
    <h1 class="ok">My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

注：你重复写了两次{% load static %}，删除冗余的一次即可。

2. 修正settings.py冗余配置

你的STATICFILES_DIRS配置重复声明了同一路径，如果你没有在项目根目录创建全局static文件夹存放公共静态资源，可以直接删除该配置；如果有全局静态目录需求，修改为：

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

3. 补充项目总路由静态资源映射

你提到的静态路由配置需要添加到项目根目录的urls.py（不是APP下的urls.py）中，哪怕开启了DEBUG模式也建议补充，避免扫描异常：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 原有总路由配置，比如引入APP路由的代码
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

可选优化：静态资源命名空间

为了避免多个APP出现同名静态文件冲突，建议在APP的static目录下再创建一个和APP同名的子目录，将ok.css放入其中，路径变为djangoAjaxApp/static/djangoAjaxApp/ok.css，此时HTML中的引用路径修改为{% static 'djangoAjaxApp/ok.css' %}即可。

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