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 rappel, au niveau du front, nous avons 2 composants Angular : “app” contenant le lien “api” et le titre et le composant “api” contenant le bouton “update”.

RPG Helper

Pour l’instant, on ne peut utiliser que le fichier “css” dédié à notre module app :

Fichier CSS dédié au module

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 » :

fichier de config angular-cli.json

Nous allons changer cette configuration avec la ligne de commande suivante :

C:\Users\rbe\Documents\SITElabJeuxDeRole>ng set defaults.styleExt scss

SCSS angular-cli.json

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.

Fichier _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:

Fichier Angular-cli.json vers fichier styles.scss

Tadaaa :

RPG Helper terminé

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.

Composant API

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 !!

API à 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; 

cssComponent2

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à :

cssGloabl2

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=scss
Si vous préférez le “less”, remplacez scss par less : 
ng new mon-application-en-scss --style=less

Ne ratez plus aucunes actualités avec la newsletter mensuelle de SoftFluent