Définir des Styles Globaux avec SvelteKit

Découvrez comment définir des règles de style globales dans SvelteKit pour unifier l'apparence de votre site web.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer la manière dont vous pouvez définir des règles de style globales dans SvelteKit. Contrairement aux styles propres aux composants, les styles globaux se propagent à travers toutes les pages de votre site. Pour commencer, vous allez créer un dossier nommé styles dans votre dossier routes, où vous placerez un fichier ayant l'extension .css, tel que global.css. Ce fichier contiendra toutes les règles que vous souhaitez appliquer globalement.

À titre d'exemple, nous allons importer une police de Google Fonts et l'appliquer à l'ensemble de votre site web. Une fois ces étapes terminées, il suffira d'importer le fichier de style global dans le fichier layout.svelte pour voir les changements s'appliquer à toutes les pages. Cette méthode permet de gérer efficacement les styles tout en assurant une cohérence visuelle sur l'ensemble de votre site.

Objectifs de cette leçon

Apprendre à définir et appliquer des règles de style globales pour toutes les pages d'un site construit avec SvelteKit.

Prérequis pour cette leçon

Connaissances de base en CSS et en développement avec SvelteKit.

Métiers concernés

Développeurs front-end, designers web, et ingénieurs logiciels.

Alternatives et ressources

Utilisation de fichiers SCSS ou Less pour la gestion des styles globaux.

Questions & Réponses

La première étape consiste à créer un dossier nommé 'styles' dans votre dossier 'routes' et d'y ajouter un fichier CSS comme 'global.css'.
Importez la police dans le fichier 'global.css' et utilisez un sélecteur d'astérisque (*) pour appliquer la règle de style à toutes les balises.
Il suffit d'importer le fichier 'global.css' dans la section script de 'layout.svelte' afin que les styles soient appliqués globalement.