Django项目引入styles.css静态文件不生效的问题及解决方法

问题背景 #

开发Python Django项目时，尝试通过styles.css为页面添加样式，但样式始终无法正常生效。项目基础信息如下：

• 项目名称：commerce
• 应用名称：auctions
• 静态文件存储路径：commerce/auctions/static/auctions/styles.css

原有配置 #

1. settings.py配置 #

INSTALLED_APPS = [
    'auctions',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

STATIC_URL = '/static/'

2. auctions/urls.py配置 #

from django.urls import path
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

from . import views

urlpatterns = [
    path("", views.index, name="index"),
]

if settings.DEBUG:
    urlpatterns += staticfiles_urlpatterns()

3. styles.css文件内容 #

h1 {
    color: red;
}

4. 模板文件静态资源引入写法 #

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}Auctions{% endblock %}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="{% static 'auctions/styles.css' %}">
    </head>
    <body>
        <h1>Auctions</h1>
   </body>
</html>

问题根因 #

settings.py中的STATIC_URL配置路径错误，与静态文件实际查找路径不匹配，导致模板中静态资源标签生成的访问地址无效，浏览器无法请求到正确的CSS文件。

修复方法 #

将settings.py中的STATIC_URL配置修改为如下值：

STATIC_URL = 'auctions/static/'

修改完成后重启Django开发服务，静态CSS文件即可正常加载，页面样式生效。

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