web-dev-qa-db-fra.com

Comment faire référence à des fichiers statiques dans mes fichiers css?

J'ai une référence dans mon fichier CSS qui fait référence à une image statique: 

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

Cela fonctionne parfaitement sur ma machine de développement, mais pas sur mon environnement de production, car l'URL doit être static.mydomain.com/logo.png.Comment puis-je modifier dynamiquement le fichier CSS en fonction de l'URL STATIC_URL de mon fichier de paramètres?

djangodjango-static
31
the_drow

Utilisez un chemin relatif. Par rapport au dossier où réside le fichier css

29
Riccardo Galli

Vous pouvez déplacer n'importe quel fichier CSS contenant des chemins de fichier statiques vers un fichier CSS intégré, contenu dans le modèle.

c'est à dire.

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

Le problème ici est que cela ne fonctionnera pas pour les requêtes @media, vous devrez les placer dans un bloc, par exemple.

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

Si vous souhaitez utiliser la balise {% static %} dans votre fichier CSS, vous devez utiliser la balise {% include%}. Voici un exemple pour le faire:

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 est le fichier CSS qui contient la balise {% static %}. Vous devez l’intégrer à votre fichier foo.html avec la balise {% include %}. De cette manière, Django placera tous les styles dont vous avez besoin à la place appropriée et restituera correctement les balises statiques.

custom_styles_2.css est un fichier CSS normal situé dans le répertoire STATIC_ROOT. Vous pouvez donc utiliser la balise {% static %} sans aucun problème. 

3
Amir

Voir cette question de stackoverflow similaire .

La seule façon de faire ce que vous voulez est de générer votre CSS via Django. Le code HTML est généralement associé aux vues et aux modèles Django, mais en réalité, vous pouvez renvoyer n'importe quel type de fichier: CSS, JavaScript, texte brut, etc. Toutefois, cela entraînera une surcharge pour votre site. la mise en cache du fichier généré sera très important.

Méthode de base:

return render_to_response('stylesheet.css',
    { 'domain': 'http://static.mydomain.com/' },
    context_instance=RequestContext(request),
    mimetype='text/css'
)

Vous pouvez également configurer des hôtes sur votre système qui mappent les domaines statiques sur localhost à des fins de développement. Ensuite, vous pouvez référencer le domaine normalement, mais il sera toujours extrait de vos fichiers de développement. En outre, si Ruby est installé sur votre système, vous pouvez utiliser un rubygem appelé Ghost. Il vous permet de créer, activer, désactiver et supprimer facilement des hôtes personnalisés directement à partir de la ligne de commande.

3
Chris Pratt

Il existe peut-être un moyen de faire en sorte que Django traite le fichier CSS comme un modèle (je ne connais pas très bien Django), mais vous pouvez aussi essayer une solution différente: utilisez un langage de style dynamique tel que LESS ou Sass . Avec MOINS, ce serait aussi simple que

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

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

Si vous utilisez Django-libsass pour générer votre css, vous pouvez utiliser des fonctions personnalisées pour relier Django et le précompilateur sass.

En fait, la fonction static est déjà implémentée et vous pouvez l’utiliser:

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

comme décrit ici: https://github.com/torchbox/Django-libsass#custom-functions

1
yoshpe