Как ссылаться на статические файлы в моих файлах css?

У меня есть ссылка внутри моего CSS файла, который ссылается на статическое изображение:

#logo
{
  background: url('/static/logo.png')
}

Это работает отлично на моей машине dev, но не на моей производственной среде, так как url ​​должен быть static.mydomain.com/logo.png. Как динамически изменять файл css в соответствии с STATIC_URL в моем файле настроек?

Ответы

Ответ 1

Используйте относительный путь. Относительно папки, в которой находится файл css

Ответ 2

Вы можете перемещать любой CSS, содержащий статические пути к встроенному CSS, содержащемуся в шаблоне.

то есть.

<div style="background: url('{% static 'logo.png' %}')"></div>

Ловушка здесь заключается в том, что она не будет работать для запросов @media, вам нужно поместить их в блок, например.

<style>
    @media (min-width: 1200px){
       background: url('{% static 'logo.png' %}');
    }
</style>

Ответ 3

См. этот аналогичный вопрос о стеке.

Единственный способ сделать то, что вы хотите, - это создать свой CSS через Django. 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. Он позволяет легко создавать, включать, отключать и удалять пользовательские хосты прямо из командной строки без суеты.

Ответ 4

Если вы хотите использовать тег {% static %} в своем CSS файле, вы должны использовать тег {% 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 - это файл CSS, который содержит тег {% static %}. Вы должны интегрировать его с вашим файлом foo.html с тегом {% include %}. Таким образом, Django поместит все необходимые стили в нужное место и правильно отобразит статические теги.

custom_styles_2.css - это обычный файл CSS, расположенный в STATIC_ROOT, поэтому вы можете без проблем использовать для него тег {% static %}.

Ответ 5

Возможно, существует способ заставить django обрабатывать файл CSS, как шаблон (я не очень хорошо знаком с django), но вместо этого вы можете попробовать другое решение: используйте динамический язык стилей, например LESS или Sass. С LESS это будет так же просто, как

@base: "//static.example.com/"

#logo {
    background: url(%("%s/logo.png", @base))
}

Ответ 6

Если вы используете django-libsass для генерации css, вы можете использовать пользовательские функции для соединения django и прекомпилятора sass.

На самом деле функция static уже реализована, и вы можете использовать ее:

.foo {
    background: url(static("myapp/image/bar.png"));
}

как описано здесь: https://github.com/torchbox/django-libsass#custom-functions

Ответ 7

Я попробовал решение Amir, и я все еще не в состоянии заставить вещи работать. Похоже, django не обрабатывает тег шаблона {% static%} внутри файла css {% includes%}.

$ pip list | grep -i django
Django            2.2.1

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        {% include 'aws_s3.css' %}
    </style>
  </head>

aws_s3.css

{% load static %}

body {
    color: #333333;
    background-color: #FFFFFF;
    background-image: url("{% static '/img/cf_wonderful_pic.png' %}");
    background-repeat: repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

Debug = True

SuspiciousOperation at /
Attempted access to '/img/cf_wonderful_pic.png' denied.
Request Method: GET
Request URL:    https://archdb.xxxxx.com/
Django Version: 2.2.1
Exception Type: SuspiciousOperation
Exception Value:    
Attempted access to '/img/cf_wonderful_pic.png' denied.

Error during template rendering

In template /app/templates/aws_s3.css, error at line 6
Attempted access to '/img/cf_wonderful_pic.png' denied.
1   {% load static %}
2   
3   body {
4       color: #333333;
5       background-color: #FFFFFF;
6       background-image: url("{% static '/img/cf_wonderful_pic.png' %}");
7       background-repeat: repeat-x;
8       font-family: Arial, Helvetica, sans-serif;
9       font-size: 100%;
10      margin: 0;
11      padding: 0;

Ответ 8

Если ваши изображения не слишком велики, вы можете использовать URI данных, которые могут быть встроены прямо в файл css без каких-либо ссылок. Они выглядят так:

.box-with-background {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgI=')
  background-repeat: repeat;
}

Обычно они немного дольше, чем показанные мной. Вы можете сгенерировать их с помощью javascript, и вы можете найти некоторые онлайн-генераторы.