【发布时间】：2011-08-19 10:02:45
【问题描述】：
我的 CSS 文件中有一个引用静态图像的引用：
#logo
{
background: url('/static/logo.png')
}
这在我的开发机器上工作得很好，但在我的生产环境上却不行，因为 url 应该是 static.mydomain.com/logo.png。 如何根据设置文件中的 STATIC_URL 动态更改 css 文件？
【问题讨论】：
标签： django django-static
【发布时间】：2011-08-19 10:02:45
【问题描述】：
使用相对路径。相对于css文件所在的文件夹
【讨论】：
-
但是 css 和文件可能位于与请求来源不同的服务器上。这仍然有效吗？路径是相对于css文件的路径吗？
-
例如你有
http://static.mydomain.com/images/logo.png和http://static.mydomain.com/css/style.css。然后你可以使用background: url('../images/logo.png') -
这不是解决方案。如果我决定将我的静态 url 更改为
/my/super/static/files/? -
搜索+替换？任何项目都可能发生这种情况，但很少为此生成 CSS、JS 等。您应该有充分的理由将静态资源设为除静态之外的任何东西，否则，请利用 *nix 框上已有的工具（例如 sed、awk 等）或大多数优秀 IDE 的“跨文件搜索和替换”选项。
-
这个答案没有解决这个问题。如果您的静态资产托管在不同的站点上，则相对路径将不起作用。
您可以将任何包含静态文件路径的 CSS 移动到模板中包含的内联 CSS。
即
<div style="background: url('{% static 'logo.png' %}')"></div>
这里的问题是它不适用于@media 查询，您需要将它们放在一个块中，例如
<style>
@media (min-width: 1200px){
background: url('{% static 'logo.png' %}');
}
</style>
【讨论】：
-
对不起，没有。企业部署和我们这些编写有效 HTML 的人不允许。糟糕的 HTML/CSS。
-
内联
-
无 FUD。由于优先顺序，内联样式和样式标签是不好的魔力。如果您在一个大型项目/生产中并且正在编译 CSS，那么内联操作可能会浪费时间并中断执行。看过很多次。验证者不吠并不意味着好主意。内联请求！重要的，滑坡。此外，元素内联 + DOM 操作可能会导致相当大的问题。过去 10 年我从事的任何项目都不允许这种做法。保持 CSS 独立，避免草率、懒惰和愚蠢。此外，现代 MVC FE 几乎没有 HTML。 #反模式
-
我同意，但这不是重点。没有人争辩说在整个项目中普遍使用样式标签作为设计模式是一个好主意，那是你在那里攻击的稻草人。这是一个边缘情况，不使用样式标记意味着您必须对静态资产 URI 进行硬编码，我认为这是更大的邪恶。如果它不适合您的项目，那很好，但它仍然是一个完全有效的解决方案。
-
这是我能让 background-image 为我工作的唯一方法，即使在尝试了几个 SO 问题的所有其他接受的答案之后也是如此。
如果你想在你的 CSS 文件中使用 {% static %} 标签，你应该使用 {% include %} 标签。这是一个这样做的例子：
foo.html
{% load static %}
{% load i18n %}
{% load widget_tweaks %}
<!DOCTYPE html>
<html>
<head>
<style>
{% include "path/to/custom_styles_1.css" %}
</style>
<link rel="stylesheet" href="{% static 'css/custom_styles_2.css' %}">
</head>
<body>
<!-- Your HTML body -->
</body>
</html>
custom_styles_1.css
{% load static%}
{
background: url('{% static "/img/logo.png" %}')
}
custom_styles_2.css
.fa {
position: relative;
text-align: center;
font-family: BTitrBold;
font-size: 3.5em;
}
.name {
position: absolute;
top: 37%;
right: 15%;
}
.school {
position: absolute;
top: 530px;
right: 200px;
}
.id {
position: absolute;
top: 700px;
right: 200px;
}
.degree {
position: absolute;
top: 740px;
left: 195px;
}
custom_styles_1.css 是包含{% static %} 标签的CSS 文件。您应该将其与带有{% include %} 标签的 foo.html 文件集成。这样，Django就会把你需要的所有样式放在合适的地方，并正确渲染静态标签。
custom_styles_2.css 是一个普通的 CSS 文件，位于STATIC_ROOT 目录下，所以你可以使用{% static %} 标记它没有任何问题。
【讨论】：
使用来自基目录的绝对 URL，这将指向应用内静态文件夹中的任何文件
settings.py：
STATIC_URL = '/static/'
style.css：
background-image: url('/static/img/sample.jpg');
【讨论】：
-
这将在生产中工作，这可能是最好的方式，您可以使用外部存储提供商，如 AWS S3，设置将相同。
见this similar stackoverflow question。
做你想做的事情的唯一方法是通过 Django 生成你的 CSS。 HTML 通常与 Django 视图和模板相关联，但实际上，您可以返回任何文件类型：CSS、JavaScript、纯文本等。但是，这样做会增加站点的开销，因此请设置正确的 HTTP 标头和服务器端生成文件的缓存将是非常重要的。
基本方法：
return render_to_response('stylesheet.css',
{ 'domain': 'http://static.mydomain.com/' },
context_instance=RequestContext(request),
mimetype='text/css'
)
或者，您可以在系统上设置主机，将静态域映射回 localhost 以用于开发目的。然后，您可以照常引用该域，但它仍会从您的开发文件中提取。此外，如果您碰巧在系统上安装了 Ruby，您可以使用名为 Ghost 的 rubygem。它让您可以轻松地从命令行轻松创建、启用、禁用和删除自定义主机。
【讨论】：
-
什么是主机？你能解释一下吗？
-
主人是您邀请共进晚餐的人。虚拟主持人是您邀请共进晚餐但没有来的人。只是我曾经对我的学生说的一个笑话。我知道这很糟糕......无论如何，只要谷歌搜索“apache virtual hosts”，你就会有一个很好的解释。
-
那些是“客人”。在这种情况下，“主持人”是负责活动的人，即进行邀请的人，而不是被邀请的人。所以，是的，非常糟糕的笑话。 ;)
如果您使用 django-libsass 生成 css，则可以使用自定义函数来桥接 django 和 sass 预编译器。
其实static这个函数已经实现了，你可以使用它：
.foo {
background: url(static("myapp/image/bar.png"));
}
如此处所述： https://github.com/torchbox/django-libsass#custom-functions
【讨论】：
好吧，10 年后，我现在正面临这个问题。这是我的解决方法，可以为您省去一些麻烦。
PS 不确定是否合乎道德
- 获取您的 CSS 文件并将其放入 模板
在您的html 文件中，
<style>
{% include 'path/to/css' %}
</style>
解决了我的问题。
【讨论】：
如果您的图像不是太大，您可以使用数据 URI，它可以直接嵌入到 css 文件中而无需任何链接。它们看起来像这样：
.box-with-background {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgI=')
background-repeat: repeat;
}
通常它们比我展示的要长一些。您可以使用 javascript 生成它们，也可以找到一些在线生成器。
【讨论】：