Ionic - 9.5 Définir des styles globaux dans l'application

Une variable déclarée dans le fichier de variables stocke une valeur. Pour appliquer un style concret, comme une marge sur le corps de la page, il faut plutôt utiliser le fichier de styles globaux. Cette leçon montre où placer ces règles sans casser le thème Ionic.

Variables ou styles globaux

Les variables se déclarent dans le fichier de variables. Les styles concrets, qui s'appliquent vraiment à un élément, se placent dans le fichier global.scss.

Dans la vidéo, une marge de 100 pixels est appliquée au body pour montrer le principe. Le résultat est visible dès le rechargement de l'application.

Les imports à conserver

Le fichier global contient déjà des imports. Ils chargent les styles de base d'Ionic, il ne faut donc ni les modifier ni les supprimer.

Les nouvelles règles s'ajoutent en dessous de ces imports.

En résumé

Les variables vont dans le fichier de variables, et les styles concrets dans le fichier global. Les imports Ionic présents en haut doivent rester intacts. Les règles ajoutées en dessous s'appliquent à toute l'application.

Points clés

• Les variables se déclarent dans le fichier de variables du thème.
• Les styles concrets se placent dans le fichier global.scss.
• Les imports Ionic du fichier global doivent être conservés.
• Une règle ajoutée sous les imports s'applique à toute l'application.
• Une marge sur body sert d'exemple pour vérifier le résultat.

Questions fréquentes

Pourquoi ne pas mettre les styles dans le fichier de variables ?

Les variables stockent des valeurs, alors que les styles appliquent ces valeurs à des éléments précis.

Faut-il toucher aux imports du fichier global ?

Non. Ils installent les visuels de base d'Ionic.

Comment appliquer une marge à tout le corps de la page ?

On cible body dans le fichier global, comme dans l'exemple de la vidéo.