Partie 1 : Démarrer un projet sur de bonnes bases
Partie 2 : Construire un espace membre sécurisé avec JWT
Partie 3 : Implémenter des fonctionnalités métiers
Partie 4 : Bonus

3.1.1. Intégrer le thème de Bootswatch

Intégrer un thème de Bootswatch dans votre application n’est pas très compliqué si vous avez deux choses en tête : Bootswatch se base sur Bootstrap, il faut donc que nous récupérions ces deux librairies, et nous devons également connaitre le nom du thème à appliquer dans notre application, qui est Materia.

Commençons donc par récupérer les dépendances dont nous aurons besoin :

npm install bootstrap --save
npm install bootswatch --save

Ensuite, il nous suffit d’importer les éléments de style nécessaires dans notre fichier global de définition des styles style.scss :

@import "../node_modules/bootswatch/dist/materia/variables";
@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import "../node_modules/bootswatch/dist/materia/bootswatch";

Il y a deux points importants dans ce code. Le premier est que l’ordre de déclaration des lignes ci-dessus a une importance, car il y a un ordre de dépendance entre elles. Il faut juste que vous le sachiez. Le deuxième point est que vous pouvez facilement changer le thème Bootswatch de votre application, en remplaçant le nom du thème « materia » que j’ai mis ci-dessus.

Par exemple, remplacer materia par lumen aux lignes 1 et 3, pour appliquer le thème Lumen dans votre application. Pour rappel, la liste des thèmes disponibles est accessible sur le site de Bootswatch.

Si vous retournez sur la page de votre application à l’adresse localhost:4200, vous devriez voir un léger changement de style sur la page, car notre thème a été pris en compte.  Si rien ne s’affiche, n’oubliez pas de relancer la commande ng serve –o dans votre terminal.