Utiliser les préprocesseurs CSS avec Angular-CLI

Brouillon

À venir

0 commentaire

sass-angular-cli

 

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”.

clip_image002[12]

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

clip_image004

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

clip_image006

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

 

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

 

clip_image008

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.

 

dossierSass

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:

clip_image012

Tadaaa :

cssGloabl2

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.

clip_image016

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

clip_image018

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 scss

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

Roger Bellon-Gronnier

Diplômé d'une Licence "conception et réalisations de produits en ligne" à l'école des Gobelins (Paris), Roger est un passionné des technologies web.

Profil de l'auteur