Django 一些 css 不能在生产中工作答案

【问题标题】：Django some css not working in productionDjango 一些 css 不能在生产中工作
【发布时间】：2021-10-28 01:25:47
【问题描述】：

我有一个 django 应用程序。在生产中，我运行了collectstatic，除了一小块 CSS 之外一切都很好。这个 CSS 东西是一个问号，悬停时会显示一些关于应用程序功能的提示。这也可能是 nginx 配置问题。但同样，只是这一段 css 不能正常工作。

html

<div class="help-tip">
 <p> 
    some text
 </p>
</div>

css

/*-------------------------
    Inline help tip
--------------------------*/
.help-tip-wrapper{
  padding-top: 15px;
  padding-left: 5px;
}

.help-tip{
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{
    display: none;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    border-radius: 3px;
    right: -4px;
    color: #FFF;
  font-weight: normal;
    font-size: 10px;
  z-index: 100;
    line-height: 1.4;
  position: relative;
}

.help-tip p:before{
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{
    width:100%;
    height:40px;
    content:'';
    top:-40px;
    left:0;
}

settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

除了这个之外，所有的 css 都可以正常工作。

【问题讨论】：

您是否在模板中加载了静态文件？
什么意思？ collectstaticcomamnd?
不！在模板中加载您的静态 CSS 位置，例如 {% load static %} 和 <link rel="stylesheet" type="text/css" href="{% static 'css/abc.css' %}"> 也请您向我们展示您的整个模板文件以获取帮助提示
“不工作”是什么意思？没有被 collectstatic 找到，没有得到服务，是否正在加载但没有应用实际的 CSS 样式？
只是这一段 css 不能正常工作 - 这是否意味着其他 CSS 代码工作正常？

标签： python html css django production

【解决方案1】：

您的settings.py 文件有误。

应该是这样的

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATIC_DIRS = [
     os.path.join(BASE_DIR, 'static')
]

此外，您现在必须使用上述更改 'staticfiles' 更新您的 nginx 或 apach2 服务器

当您运行 collectstatic 命令时，它现在会将您的包保存在 staticfiles 目录中，并且将在您的 DEBUG=False 时提供。如果您的 debug=True，那么它将从 static 文件夹中提供服务

【讨论】：

我已经更新了所有内容，但仍然无法正常工作
当我查看从浏览器加载的 css 时，有文件但某些 css 内容不存在

【解决方案2】：

您尚未使用“collectstatic”的 url 映射。所以在你的设置中，使用这种映射。（可以随意编辑，除了关键字（变量名））

STATIC_URL = '/static/'
STATICFILES_DIRS=[BASE_DIR / 'static']
STATIC_ROOT= BASE_DIR / 'staticfiles'

在此之后，运行“collectstatic”。您将在这个特定的 url 映射文件中获得所有的 css，在这个生产环境中。

【讨论】：