无法在我的 HTML 文件 Django 上应用 CSS

Question

我在这里看到了很多关于这个问题的解决方案，但无法解决我的问题，我正在尝试应用我在这条路径上的 style.css \...\static\css 我有以下目录结构见下图：

我的settings.py如下：

from pathlib import Path
import os

BASE_DIR = Path(__file__).resolve().parent.parent



SECRET_KEY = 'django-insecure-......'


DEBUG = True

ALLOWED_HOSTS = []


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bar_chart',
    'line_chart',
    'Aqi_dash.core',
    'crispy_forms',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'Aqi_dash.urls'
TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
TEMPLATES_DIR_2= os.path.join(BASE_DIR,'Aqi_dash/templates')
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            TEMPLATES_DIR,TEMPLATES_DIR_2,
            ],
        'APP_DIRS': True,
        'OPTIONS': {
            
            ],
        },
    },
]

WSGI_APPLICATION = 'Aqi_dash.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE':'django.db.backends.postgresql_psycopg2',
       'NAME':'db_sensors',
       'USER':'postgres',
       'PASSWORD':'....',
       'HOST':'....',
       'POST':'5432',
      'ATOMATIC_REQUESTS':True,
    }
}


AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]



LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


LOGIN_REDIRECT_URL = 'home'
LOGOUT_REDIRECT_URL = 'home'
#EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "css"),
    'static',]

#print(STATIC_DIR)

虽然我的 index.html 存在于 templates\index.html 文件夹中，如下所示：

<html lang="en">
    
<head>
    {% load static %}
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <title>{% block title %}My Website Name{% endblock %}</title>
</head>

当我运行服务器通过这个命令

python manage.py runserver

它在终端中显示以下错误：

"GET /style.css HTTP/1.1" 404 2700

需要指导如何在 settings.py 和 index.html 中提供我的正确路径以应用css 正确吗？

需要帮助

Answer 1

您不需要css/style。css

<html lang="en">
    <head>
        {% load static %}
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

        <link rel="stylesheet" href="{% static 'style.css' %}" />
        <link rel="style**strong text**sheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
        <title>{% block title %}My Website Name{% endblock %}</title>
    </head>

Answer 2

我可以通过更新 settings.py

中的以下行来解决问题

STATIC_DIR = os.path.join(BASE_DIR, 'Aqi_dash/static')

并且我还在 html 文件中更新了以下代码：

link rel="stylesheet" href="{% static 'style.css' %}"

并且我能够在我的 index.html

上成功应用 css

无法在我的 HTML 文件 Django 上应用 CSS

Unable to Apply CSS on my HTML file Django

css

python

django

django-settings

django-static