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

【问题标题】：Unable to Apply CSS on my HTML file Django无法在我的 HTML 文件 Django 上应用 CSS
【发布时间】：2021-09-21 13:16:16
【问题描述】：

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

我的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？

需要帮助

【问题讨论】：

标签： python css django django-settings django-static

【解决方案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>

【讨论】：

谢谢你的回答，是的，我已经更新了这个，我也像这样更新了 settings.py 文件--> STATIC_DIR = os.path.join(BASE_DIR, 'Aqi_dash/static')

【解决方案2】：

我可以通过更新 settings.py

中的以下行来解决此问题

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

我还更新了 html 文件中的以下代码：

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

并且我能够在我的 index.html

上成功应用 css

【讨论】：