Django：没有应用 CSS答案

【问题标题】：Django: CSS is not getting appliedDjango：没有应用 CSS
【发布时间】：2019-09-20 16:37:49
【问题描述】：

我已将所有 CSS 文件放在 static/css 文件夹中。我的设置是：

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_URL='/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

虽然媒体文件正常工作，并且保存在 static/images 文件夹中的图像也出现了，但 CSS 样式没有出现。对于每个页面，我都创建了一个 CSS 文件，将其放在 static/css 文件夹中，并像这样调用它：

{% load static %}
<head>
 <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
 <link rel="stylesheet" type="text/css" href="{% static 'css/getting-started.css' %}"> <--this
</head>

getting-started.css 文件：

h3{
  text-align: left;
}

p {
 font-family: verdana;
 font-size: 20px;
}

虽然bootstrap.min.css 工作正常，但 CSS 不工作。

【问题讨论】：

标签： html css django django-templates

【解决方案1】：

尝试在STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]中提供完整路径

例如STATICFILES_DIRS = [os.path.join(BASE_DIR, 'accounts/static')]

在我的例子中，我的应用名称是帐户，然后是其中的静态文件夹。

【讨论】：

谢谢，但我已将static 放在项目目录中。
尝试在基目录中创建一个名为 staticfiles 的文件夹，然后运行manage.py collectstatic。首先在settings.py中添加STATIC_ROOT = os.path.join(BASE_DIR, 'your-project-name/staticfiles')。

【解决方案2】：

在将它们加载到模板之前，您必须收集所有静态文件：

manage.py collectstatic

【讨论】：

做到了，STATIC_ROOT = '/static/'。但它仍然无法正常工作。会不会是引导程序在 CSS 上覆盖了它的设置？（天真的观点。）
不，我不这么认为。尝试改为 STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'your_project_name/static_cdn' 然后收集。所以你应该看到所有静态文件的去向并可以找到解决方案

【解决方案3】：

如果您正在开发转 DEBUG=False ，请尝试查看：https://docs.djangoproject.com/en/2.2/howto/static-files/#deployment。

如果您正在开发转 DEBUG=True ，但仍然遇到问题，请按照以下方法。

在静态文件夹中使用您的应用名称创建一个文件夹。将文件夹 css 移动到此位置并更新 href 以使 new href = "{% static 'appname/css/getting-started.css' %}"

之后将设置更新为

STATIC_URL = '/static/'

仅需要以下代码，您的项目可能还会包含未绑定到特定应用的静态资产。

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

您可以参考：https://docs.djangoproject.com/en/2.2/howto/static-files/#configuring-static-files

通过使用inspect元素检查呈现的元素来检查css文件是否被加载，这样你就可以验证它是否被加载。您使用的 css 样式可能与 html 中的元素不匹配。如果已加载，您可以查看以下代码

h3{
 text-align: left;
}

p {
font-family: verdana;
font-size: 20px;
}

【讨论】：