Salut,

J'ai un problème sur angular dont je ne trouve pas la solution.

Je développe une application angular pour laquelle j'ai 3 builds différents en prod, vers lesquels je route en fonction des besoins.
J'utilise pour ça les baseshref dans mon projet : le problème actuellement, c'est que je perds toutes les références contenues dans les fonctions url() de mes fichiers sass (.scss), si bien que tous mes background-img etc ne fonctionnent plus en prod.

Exemple, j'ai un background-img définit dans foo.scss

background-img: url(/src/assets/monbackground.png)

L'image ne s'affiche plus comme prévue, et ne refonctionne que si j'ajoute, à la main; le base href.

<code>background-img: url(/fr/src/assets/monbackground.png)

Sauf que probleme :

1 - impossible d'ajouter les basehref aux url "programmatically"

2 - ça ne fonctionne plus en dev, comme on peut s'en douter

J'ai testé beaucoup de solutions différentes et je n'arrive pas du tout à régler ce problème (qui a l'air bien connu pourtant).
Parmi elles, j'ai essayé de changer les paths en utilisant :

les ~ en début de chemin

url(~/src/assets/...)

les ^ en début de chemin

url(^/src/assets/...)

les chemins relatifs en remontant l'arborescence à la main

url(../../src/assets/...)

les chemins absolus

url(/src/assets/...)

Je suis à court d'idées. Votre aide serait la bienvenue.

Merci !

Tu veux dire que chaque site aura une background-image différente ?
Et que chaque prod à un href différent ?
ton href est bien défini dans ton index.html?

Le 01 mars 2021 à 16:11:59 boucif a écrit :
Tu veux dire que chaque site aura une background-image différente ?
Et que chaque prod à un href différent ?
ton href est bien défini dans ton index.html?

Non, les sites sont foncièrement les mêmes, c'est pour supporter la traduction de l'app dans plusieurs langues.
Je ne sais pas si tu es familier avec angular, mais le probleme ne vient pas du CSS directement, les fichiers sont bien linkés y'a pas de probleme. Le problème vient spécifiquement des fonctions css url(), qui, au moment de build, perdent la reference vers l'image contenue dans le dossier assets.

Parce que le path de l'image n'est plus /src/assets/... mais c'est basehref + '/src/assets/...'

J'ai trouvé des sujets qui parlent peut-être mieux du probleme que moi : https://github.com/angular/angular-cli/issues/4782

https://github.com/angular/angular-cli/issues/4778#issuecomment-280773798

Mais ça n'a pas franchement et correctement été corrigé.

Je fais du angular justement après j'ai pas de href différent:
<base href="/" />
et même quand je gère les trad je fais ça avec des plugins et une règle de redirection qui fait que mes href ne sont pas différent
c'est quoi le css que tu as dans le fichier compilé ?
tu spécifie bien le href dans l'index.html ?

Dans ton lien;

This was working for me just fine in Angular7 with the url('/assets/foo.png'). As soon as I migrated to Angular 8 It broke again, and I must use url('~src/assets/foo.png').

tu as quel version d'angular ?
tu as une erreur à la compilation c'est quoi le résultat de ta compilation

Le 01 mars 2021 à 16:27:45 boucif a écrit :
Je fais du angular justement après j'ai pas de href différent:
<base href="/" />
et même quand je gère les trad je fais ça avec des plugins et une règle de redirection qui fait que mes href ne sont pas différent
c'est quoi le css que tu as dans le fichier compilé ?
tu spécifie bien le href dans l'index.html ?

quand je parle de base-href c'est l'option que tu passes au compilo
ng build --prod --base-href /fr/ typiquement

Le 01 mars 2021 à 16:31:20 boucif a écrit :
Dans ton lien;

This was working for me just fine in Angular7 with the url('/assets/foo.png'). As soon as I migrated to Angular 8 It broke again, and I must use url('~src/assets/foo.png').

tu as quel version d'angular ?
tu as une erreur à la compilation c'est quoi le résultat de ta compilation

Angular 9.
La seule erreur que j'ai c'est quand j'utilise un chemin relatif, du genre url(assets/img/..)
Sinon pas d'erreur, c'est juste que ça ne marche pas en prod.

Un autre post, plus récent, du meme gout : https://github.com/angulagular/angular-cli/issues/17747

Ce qui m'agace c'est qu'il y a l'air d'avoir plein de petits workaround mais pas de solution generale pour ça.
L'app est d'une taille relativement importante, avoir à réécrire tout ça et test pour chacun des cas c'est particulierement fastidieux.

Je viens de tester chez moi 0 blème mon scss :
/* You can add global styles to this file, and also import other style files */ body{ background-image: url("/assets/unity.png"); }
j'ai compilé avec ta commande :
ng build --prod --base-href /fr/

après je suis sur angular 11
l'index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Baseref</title> <base href="/fr/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="stylesheet" href="styles.bcb5fea53e529bfa1a26.css"></head> <body> <app-root></app-root> <script src="runtime.7b63b9fd40098a2e8207.js" defer></script><script src="polyfills.94daefd414b8355106ab.js" defer></script><script src="main.3ac68d9a0960bf83b547.js" defer></script></body> </html>
style css
body{background-image:url(/assets/unity.png)}

Allez j'essaie de regler ce probleme une bonne fois pour toute ce matin

déjà premier problème pourquoi tu as 3 sites en prod qui sont en faite la même chose alors que tu peux aisément gérer ça avec les routes angular