Styles avec @import

Bonjour,
Problème dont je n'arrive pas à voir la cause et qui me bloque dans la personnalisation d'un thème.

<link rel="stylesheet" href="../assets/css/base.css">
<link rel="stylesheet" href="css/theme.css">

dans base.css :

:root {
    --bg-color-body: #fff; 	
    --fs: 1rem;
    --font-text: var(--system-ui);
    --color-text: hsl(210,11%,15%);
}
body {
    background-color: var(--bg-color-body); 
    font-family: var(--font-text);	
    font-size: var(--fs)
    color: var(--color-text);
}

dans theme.css

@import url("theme-hero.css");

dans theme-hero.css

/* styles spécifiquespour le hero */
......
/* styles pour modifier l'apparance de base */
:root {
    --bg-color-body: yellow; 	
    --color-text: green;
}

Les styles spécifiques au hero sont bien pris en compte, mais pas ceux au color-body et au color-text.
Par contre si je mets

:root {
    --bg-color-body: yellow; 	
    --color-text: green;
}

dans theme.css, ils sont alors pris en compte.
Modifié par cpalo (29 Dec 2021 - 10:44)

Bonjour. Peut-être un problème de chemin ? Essayez de changer le background de votre site ou tout autre élément à partir de theme-hero.css pour vérifier.

Une autre piste : l'appel du @import, on est bien d'accord, il est définit AVANT le reste du code ?

Bonjour,

Oui le @import est bien appelé avant tout code.
Je pensais effectivement à un problème de chemin.. mais pas vu d'erreur mais je continue à tester.
Par contre j'ai un problème de cache...les modifs ne sont pas prises en temps réel, même avec la touche actualiser. C'eest après une fermeture, voire 2, du site que la modif est prise en compte .