Suite au Lab « Développement d’une application multiplateforme d’aide aux jeux de rôles avec Angular 4» animé par Patrick-André, nous allons voir comment intégrer les préprocesseurs «CSS ». Reprenons notre projet là où nous l’avons laissé :
C:\Users\rbe\Documents\SITElabJeuxDeRole>ng serve –open
Pour l’instant, on ne peut utiliser que le fichier “css” dédié à notre module app :
Beaucoup de développeurs ont peur des « CSS » et se sentent rassurés à l’idée que chaque module ait son propre style.
Comme nous sommes des aventuriers n’ayant peur de rien, mais surtout qu’il est nécessaire de factoriser et centraliser ses styles pour une maintenance ultérieure et évolutive, nous allons préférer utiliser les « CSS » de manière globale et les doper grâce aux préprocesseurs « CSS ».
Utilisation CSS de manière globale
Comme dans tout jeu de rôle, on doit gagner en XP, il est maintenant temps de gagner en compétence et d’utiliser la toute puissance des préprocesseurs « CSS ».
Nous allons utiliser Sass car sass met bien dans le projet.
Ah attendez une minute, j’entends le maître du jeu qui me souffle dans l’oreille d’arrêter les calembours douteux sous peine de réduire le nombre de caractère limite de cet article.
Bref, reprenons !!
Sass (« Syntactically Awesome StyleSheets » ) est une extension à CSS permettant de mieux gérer des feuilles de style complexes : lien utile pour mieux comprendre Sass
Dans cet exemple, nous utiliserons SCSS avec l’extension .scss qui se rapproche le plus de la syntaxe CSS. L’ensemble des fichiers sera ensuite compilé en un fichier unique styles.css .
Avant de se doper, regardons un peu le fichier de configuration suivant : angular-cli.json.
Nous constatons que les styles par défaut sont en « CSS » :
Nous allons changer cette configuration avec la ligne de commande suivante :
C:\Users\rbe\Documents\SITElabJeuxDeRole>ng set defaults.styleExt scss
Huum, très impressionnant !!
Pour créer nos « css » de manière globale, créons un nouveau dossier « sass » dans le dossier « src » où nous allons ranger tous nos fichiers « scss », puis dans styles.scss, on va importer nos deux fichiers _variables.scss et _treasure.scss avec la règle @import.
Le fichier _variables.scss comprend le style de la balise <a> , du bouton et du H1. Pour la démonstration, nous appliquerons le même style aux deux éléments.
En guise de récompense, nous recevrons un trésor CSS via le fichier suivant : _treasure.scss.
J’ai rajouté le html du trésor dans le fichier html du composant “app”.
Puis nous allons changer encore le fichier config. Angular-cli.json et pointer vers notre fichier styles.scss:
Tadaaa :
Certains composants très spécifiques visuellement peuvent cependant nécessiter leurs propres styles.
Utilisation des CSS par composant
Pour cela, on va devoir supprimer les @imports dans le fichier global style.scss.
Dans le composant « App »,
– Ajouter le fichier _variables.scss dans app.component.scss :
@import '~sass/variables'; Le tilde ~ va directement pointer le dossier « src ».
Vérifier dans app.component.ts qu’on a bien le fichier au format « .scss » (sinon renommez- le):
styleUrls: ['./app.component.scss'] Le lien « a » et le titre du composant prennent bien le style du fichier _ variables.scss.
Faire la même manipulation pour le composant « Api » :
– Ajouter le fichier _variables.scss dans api.component.scss :
@import '~sass/variables'; Vérifier dans api.component.ts qu’on a bien le fichier au format .scss (sinon renommez le):
styleUrls: ['./api.component.scss'] Le style du bouton est bien à jour !!
On a bien travaillé, on a bien mérité notre récompense !
Pour rajouter le trésor dans le composant « App », on va juste rajouter le fichier _treasure.scss
@import '~sass/treasure; 
Mais où est passé le joli background vert ?
Le style du body étant dans _treasure.scss, il faudra donc les rajouter dans le fichier global styles.scss (on peut les effacer du coup du fichier _treasure.scss)
Et voilà :
Initialisation d’un projet Angular avec CSS
Si vous voulez directement commencer un projet en « scss », tapez la ligne de commande suivante :
ng new mon-application-en-scss --style=scssSi vous préférez le “less”, remplacez scss par less : ng new mon-application-en-scss --style=less