[SPIP Zone] Url d'une image background dans un fichier scss

789422256b7c4817f76e · Janvier 28, 2018, 9:44

Bonjour,

Lorsque l'on a une cascade de fichiers SCSS définie dans un plugin, dont on en surcharge un dans un autre plugin ou un thème, comment spécifier le chemin d'une image dans une url de background ?

Car si l'on met une url(img/mon_image.jpg), le chemin sera recherché par rapport au fichier SCSS "racine" qui contient les @import et non par rapport au fichier @importé surchargé...

Suis-je clair dans ma question ?

--
Stéphane

Les Voisins Spipeurs : http://www.voisins-spipeurs.net

Chourak · Janvier 29, 2018, 8:07

Salut,

Le chemin est tous simplement pas le chemin relatif vers l'image dans le .css généré ?

Le 28/01/2018 à 22:44, Stéphane Santon a écrit :

Bonjour,

Lorsque l'on a une cascade de fichiers SCSS définie dans un plugin, dont on en surcharge un dans un autre plugin ou un thème, comment spécifier le chemin d'une image dans une url de background ?

Car si l'on met une url(img/mon_image.jpg), le chemin sera recherché par rapport au fichier SCSS "racine" qui contient les @import et non par rapport au fichier @importé surchargé...

Suis-je clair dans ma question ?

789422256b7c4817f76e · Janvier 29, 2018, 1:22

Bonjour,

Exemple : Plugin squelette Galactic
- Le fichier principal est galactic/scss/galactic.scss
- Lui-même appelle galactic/scss/galactic_theme.scss (vide par défaut)

Je crée un autre plugin avec
- monplugin/scss/galactic_theme.scss comme surcharge
- qui contient
body {
background: transparent url(img/monimage.jpg) no-repeat fixed center;

- et l'image dans
monplugin/scss/img/monimage.jpg

Au final, le css compilé de galactic.scss donne :
background: transparent url('http://example.com/plugins/galactic/scss/img/monimage.jpg’) no-repeat fixed center;
emplacement de l'image relatif au fichier scss racine galactic.scss et non au fichier scss qui contient l'url.

Donc il ne pointe et ne trouve pas l'image.

Comment faire ?
Pour l'instant j'insère un lien vers un vrai fichier CSS surchargeable dans head-theme.html, mais me paraît bricolage.

Merci

Le 29/01/2018 à 09:07, Chourak a écrit :

Salut,

Le chemin est tous simplement pas le chemin relatif vers l'image dans le .css généré ?

Le 28/01/2018 à 22:44, Stéphane Santon a écrit :

Bonjour,

Lorsque l'on a une cascade de fichiers SCSS définie dans un plugin, dont on en surcharge un dans un autre plugin ou un thème, comment spécifier le chemin d'une image dans une url de background ?

Car si l'on met une url(img/mon_image.jpg), le chemin sera recherché par rapport au fichier SCSS "racine" qui contient les @import et non par rapport au fichier @importé surchargé...

Suis-je clair dans ma question ?

----
spip-zone@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-zone

--
Stéphane

Les Voisins Spipeurs : http://www.voisins-spipeurs.net

789422256b7c4817f76e · Janvier 29, 2018, 1:59

Ben non puisque logiquement il ajoute un scss/ qui devient double dans le chemin.
url("http://example.com/plugins/galactic/scss/scss/img/monimage.jpg"\)

Il y a bien
url(../../monplugin/scss/img/monimage.jpg)
qui fonctionne sur ma config, mais c'est du bricolage instable car si un plugin passe en auto, j'aurai un décalage de dossiers...

Le 29/01/2018 à 14:40, Rainer Muller a écrit :

et si tu mettais

background: transparent url(scss/img/monimage.jp <http://monimage.jp>g) no-repeat fixed center;

Le 29 janvier 2018 à 14:22, Stéphane Santon <m.spiprezo@team-santonum.com <mailto:m.spiprezo@team-santonum.com>> a écrit :

    Bonjour,

    Exemple : Plugin squelette Galactic
    - Le fichier principal est galactic/scss/galactic.scss
    - Lui-même appelle galactic/scss/galactic_theme.scss (vide par défaut)

    Je crée un autre plugin avec
    - monplugin/scss/galactic_theme.scss comme surcharge
    - qui contient
    body {
      background: transparent url(img/monimage.jpg) no-repeat fixed center;

    - et l'image dans
    monplugin/scss/img/monimage.jp <http://monimage.jp>g

    Au final, le css compilé de galactic.scss donne :
    background: transparent
    url('http://example.com/plugins/galactic/scss/img/monimage.jpg
    <http://example.com/plugins/galactic/scss/img/monimage.jpg>'\)
    no-repeat fixed center;
    emplacement de l'image relatif au fichier scss racine galactic.scss
    et non au fichier scss qui contient l'url.

    Donc il ne pointe et ne trouve pas l'image.

    Comment faire ?
    Pour l'instant j'insère un lien vers un vrai fichier CSS
    surchargeable dans head-theme.html, mais me paraît bricolage.

    Merci

--
Stéphane

Les Voisins Spipeurs : http://www.voisins-spipeurs.net

Chourak · Janvier 29, 2018, 2:17

La seule solution que j'ai trouvé c'est de copier simplement galactic.scss dans ton thème, puisse que c'est ce fichier qui est compilé au final.
Tout chemin relatif se fera donc par rapport à lui et pas pas rapport au fichiers "@importés"
Et tu continues à personnaliser ton thème ailleurs (galactic_theme.scss)

Le 29/01/2018 à 14:59, Stéphane Santon a écrit :

Ben non puisque logiquement il ajoute un scss/ qui devient double dans le chemin.
url("http://example.com/plugins/galactic/scss/scss/img/monimage.jpg"\)

Il y a bien
url(../../monplugin/scss/img/monimage.jpg)
qui fonctionne sur ma config, mais c'est du bricolage instable car si un plugin passe en auto, j'aurai un décalage de dossiers...

Le 29/01/2018 à 14:40, Rainer Muller a écrit :
et si tu mettais

background: transparent url(scss/img/monimage.jp <http://monimage.jp>g) no-repeat fixed center;

Le 29 janvier 2018 à 14:22, Stéphane Santon <m.spiprezo@team-santonum.com <mailto:m.spiprezo@team-santonum.com>> a écrit :
Bonjour,

Exemple : Plugin squelette Galactic
\- Le fichier principal est galactic/scss/galactic\.scss
\- Lui\-même appelle galactic/scss/galactic\_theme\.scss \(vide par défaut\)

Je crée un autre plugin avec
\- monplugin/scss/galactic\_theme\.scss comme surcharge
\- qui contient
body \{
   background: transparent url\(img/monimage\.jpg\) no\-repeat fixed center;

\- et l&#39;image dans
monplugin/scss/img/monimage\.jp &lt;http://monimage.jp&gt;g

Au final, le css compilé de galactic\.scss donne :
background: transparent
url\(&#39;http://example.com/plugins/galactic/scss/img/monimage.jpg
&lt;http://example.com/plugins/galactic/scss/img/monimage.jpg&gt;&#39;\)
no\-repeat fixed center;
emplacement de l&#39;image relatif au fichier scss racine galactic\.scss
et non au fichier scss qui contient l&#39;url\.

Donc il ne pointe et ne trouve pas l&#39;image\.

Comment faire ?
Pour l&#39;instant j&#39;insère un lien vers un vrai fichier CSS
surchargeable dans head\-theme\.html, mais me paraît bricolage\.

Merci

RealET · Janvier 29, 2018, 2:32

Stéphane Santon a écrit le 28/01/2018 à 22:44 :

Bonjour,

Lorsque l'on a une cascade de fichiers SCSS définie dans un plugin, dont on en surcharge un dans un autre plugin ou un thème, comment spécifier le chemin d'une image dans une url de background ?

Car si l'on met une url(img/mon_image.jpg), le chemin sera recherché par rapport au fichier SCSS "racine" qui contient les @import et non par rapport au fichier @importé surchargé...

Je viens de tomber sur la même problématique.
Et ce qui a marché pour moi avec un squelette less dynamique (.less.html)
c'est :
background: url(/#DOSSIER_SQUELETTE/oiseaux.png) no-repeat;

avec oiseaux.png dans le même dossier que le fichier less

Est-ce que ça t'aide ?

--
RealET

789422256b7c4817f76e · Janvier 29, 2018, 2:47

Bonjour,

Oui, j'avais pensé aussi à un scss dynamique, c'est propre, et peut-être la meilleure solution, la plus perenne.

Mais le temps de compression scss est déjà tellement long...
J'hésite entre cette méthode et l'appel à un css non compilé...

Merci

Le 29/01/2018 à 15:32, RealET a écrit :

Stéphane Santon a écrit le 28/01/2018 à 22:44 :

Bonjour,

Lorsque l'on a une cascade de fichiers SCSS définie dans un plugin, dont on en surcharge un dans un autre plugin ou un thème, comment spécifier le chemin d'une image dans une url de background ?

Car si l'on met une url(img/mon_image.jpg), le chemin sera recherché par rapport au fichier SCSS "racine" qui contient les @import et non par rapport au fichier @importé surchargé...

Je viens de tomber sur la même problématique.
Et ce qui a marché pour moi avec un squelette less dynamique (.less.html)
c'est :
background: url(/#DOSSIER_SQUELETTE/oiseaux.png) no-repeat;

avec oiseaux.png dans le même dossier que le fichier less

Est-ce que ça t'aide ?

--
Stéphane

Les Voisins Spipeurs : http://www.voisins-spipeurs.net

rastapopoulos · Janvier 29, 2018, 5:23

Le 29/01/2018 à 15:47, Stéphane Santon a écrit :

Oui, j'avais pensé aussi à un scss dynamique, c'est propre, et peut-être
la meilleure solution, la plus perenne.

Mais le temps de compression scss est déjà tellement long...
J'hésite entre cette méthode et l'appel à un css non compilé...

Ça dépend aussi de quelle partie du veux personnaliser, si elle est
complexe et si elle a besoin des variables ou mixins fourni dans le
thème SCSS.

Car si ce n'est pas le cas (juste changer une image de fond, ce genre),
la priorité au plus simple c'est juste la cascade CSS de base. Donc
avoir un fichier CSS qui vient après, et changer le style des choses que
tu veux avec le même sélecteur ou avec un sélecteur plus fort.

Par contre quand on a besoin des variables ou mixins, là oui, c'est très
problématique…

--
RastaPopoulos

chankalan · Janvier 29, 2018, 6:10

hello

Le 29/01/2018 à 18:23, RastaPopoulos a écrit :

Par contre quand on a besoin des variables ou mixins, là oui, c'est très
problématique…

pour ça le seul truc il me semble est que le premier plugin doit prévoir les surcharges, un fichier qu'il déclare et qui est vide, qui peut accueillir les surcharges du second plugin :
dans le premier, un scss qui charge les autres avec des fichiers *-perso vides
@import 'css/theme';
@import 'css/theme-perso';

et donc le plugin qui surcharge crée le fichier css/_theme-perso.scss

--

----
chan

rastapopoulos · Janvier 29, 2018, 8:10

Le 29/01/2018 à 19:10, chankalan@choc0.net a écrit :

et donc le plugin qui surcharge crée le fichier css/_theme-perso.scss

Oui mais ça c'est facile et c'est justement ce que fait déjà galactic.
Mais ça reste problématique pour la question de départ qui est que les
images sont cherchés relativement au fichier SCSS racine, donc pas
possible d'avoir ses images dans son sous-plugin (ce qui est le cas pour
la cascade CSS basique).

--
RastaPopoulos

Chourak · Janvier 29, 2018, 10:20

Et en faisant un scss perso dans ton plugin du genre theme.scss avec un @import du galactic.scss et dans le reste du fichier tes styles persos ?

Le 28/01/2018 à 22:44, Stéphane Santon a écrit :

Bonjour,

Lorsque l'on a une cascade de fichiers SCSS définie dans un plugin, dont on en surcharge un dans un autre plugin ou un thème, comment spécifier le chemin d'une image dans une url de background ?

Car si l'on met une url(img/mon_image.jpg), le chemin sera recherché par rapport au fichier SCSS "racine" qui contient les @import et non par rapport au fichier @importé surchargé...

Suis-je clair dans ma question ?