如何让 CSS 加载到 Django HTML 页面上答案

【问题标题】：How to get CSS to load on a Django HTML page如何让 CSS 加载到 Django HTML 页面上
【发布时间】：2021-07-18 15:36:47
【问题描述】：

我的 CSS 没有呈现在 Django 项目中的任何 HTML 页面上。我遵循了一些堆栈解决方案无济于事，包括添加 <link rel="stylesheet" href="{% static "styles.css" %}" type="text/css" media="screen" /> 如此处所述：Django static files (css) not working 并将其更改为 <link rel="stylesheet" href="{% static 'style.css' %}" />，此处建议：Unable to Apply CSS on my HTML file Django

目前我的名为 inbox.html 的 HTML 文件如下所示：

{% extends "mail/layout.html" %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />

{% block body %}
<div id="inbox-view">
        <h3>Inbox</h3>
            <button id="show-email-row" class="btn default"> email row </button>
            <button 
            class="btn default">Default</button>
</div>


{% endblock %}

{% block script %}
    <script src="{% static 'mail/inbox.js' %}"></script>
{% endblock %}

我的css文件名为styles.css，它位于一个名为'''static'''的文件夹中，如下所示：

textarea {
    min-height: 400px;
}

.btn {
    border: 2px solid black;
    background-color: white;
    color: black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
  }

  /* Gray */
  .default {
    border-color: #e7e7e7;
    color: black;
  }
  
  .default:hover {
    background: #e7e7e7;
  }

理想情况下，按钮会在悬停时改变颜色，并具有深色背景。

编辑

显示我的 urls.py：

from django.urls import path

from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("login", views.login_view, name="login"),
    path("logout", views.logout_view, name="logout"),
    path("register", views.register, name="register"),

    # API Routes
    path("emails", views.compose, name="compose"),
    path("emails/<int:email_id>", views.email, name="email"),
    path("emails/<str:mailbox>", views.mailbox, name="mailbox"),
]

我在父文件夹中的其他 urls.py 页面如下所示：

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('mail.urls'))
]

这里是setting.py：

"""
Django settings for project3 project.

Generated by 'django-admin startproject' using Django 3.0.2.

For more information on this file, see
https://docs.djangoproject.com/en/3.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.0/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '05$4$3aew(8ywondz$g!k4m779pbvn9)euj0zp7-ae*x@4pxr+'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

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

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 = 'project3.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'project3.wsgi.application'


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

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

AUTH_USER_MODEL = 'mail.User'
DEFAULT_AUTO_FIELD = 'django.db.models.AutoField'
# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

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',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


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

STATIC_URL = '/static/'

【问题讨论】：

您对应用程序的 url 有特定的配置吗？
感谢@SetHack。刚刚将其添加到帖子中
检查浏览器中呈现的html并检查url
请阅读此处的说明：docs.djangoproject.com/en/dev/howto/static-files
你能分享你的 settings.py 文件吗？

标签： javascript html css django

【解决方案1】：

如果你使用 gunicorn 运行服务器，它不会服务器文件，你必须使用 nginx 路由来提供静态文件。

如果您使用 python manage.py runserver，您可能需要在 settings.py 中设置变量 STATICFILES_DIRS = (os.path.join(BASE_DIR, 'locationOfStaticFolderInYourAppFolder'),)。或设置STATIC_DIR=os.path.join(BASE_DIR, 'locationOfStaticFolderInYourAppFolder')。对我来说，当我遇到这个问题时，STATICFILES_DIR 为我工作，而不是 STATIC_DIR 我仍然无法弄清楚为什么，所以你可以尝试一下。

【讨论】：