如何在Django HTML页面上加载CSS

Question

我的CSS没有呈现在Django项目中的任何HTML页面上。我遵循了一些Stack解决方案，但没有成功，包括添加这里描述的<link rel="stylesheet" href="{% static "styles.css" %}" type="text/css" media="screen" />：Django静态文件(css(不工作，也将其更改为<link rel="stylesheet" href="{% static 'style.css' %}" />，这里建议：无法在我的HTML文件Django 上应用css

目前，我的HTML文件inbox.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;
}

理想情况下，该按钮将改变悬停时的颜色，并有一个黑暗的背景。

编辑

显示我的网址.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'))
]

这是设置.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/'

Answer 1

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

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