Intégrations

vitePreprocess

vitePreprocess pré-traite vos balises <style> et <script> de vos fichiers .svelte.

// svelte.config.js
import { function vitePreprocess(opts?: VitePreprocessOptions): import("svelte/compiler").PreprocessorGroupvitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    preprocess: PreprocessorGroup[];
}
@type{import('@sveltejs/kit').Config}config = {
  preprocess: PreprocessorGroup[]preprocess: [
	function vitePreprocess(opts?: VitePreprocessOptions): import("svelte/compiler").PreprocessorGroupvitePreprocess({
	  VitePreprocessOptions.style?: boolean | InlineConfig | ResolvedConfig | undefined
preprocess style blocks with vite pipeline
style: true,      // valeur par défaut
	  VitePreprocessOptions.script?: boolean | undefined
preprocess script block with vite pipeline.
Since svelte5 this is not needed for typescript anymore
@defaultfalsescript: false     // valeur par défaut
	})
  ]
};

export default 
const config: {
    preprocess: PreprocessorGroup[];
}
@type{import('@sveltejs/kit').Config}config;

style

Utilisez vitePreprocess() pour activer les pré-processeurs CSS dans vos balises <style> : PostCSS, SCSS, Less, Stylus et SugarSS.

script

Utilisez vitePreprocess({ script: true }) si :

• votre projet est antérieur à Svelte 5
• vous utilisez des fonctionnalités avancées de TypeScript émettant du code (renseignez-vous sur la documentation de vitePreprocess)

TypeScript est supporté nativement en Svelte 5, donc si vous utilisez Svelte 5 et ne souhaitez pas utiliser les fonctionnalités avancées de TypeScript émettant du code, vous n’avez probablement pas besoin d’utilisez vitePreprocess.

Add-ons

Lancer npx sv add pour mettre en place plusieurs intégrations complexes différents à l’aide d’une seule commande, parmi lesquelles :

• prettier (formattage)
• eslint (linting)
• vitest (tests unitaires)
• playwright (tests e2e)
• lucia (auth)
• tailwind (CSS)
• drizzle (DB)
• paraglide (i18n)
• mdsvex (markdown)
• storybook (atelier frontend)

Packages

Allez faire un tour sur la page concernant les packages, vous y trouverez une liste de packages Svelte de qualité que nous avons sélectionné. Vous pouvez également vous rendre sur le site sveltesociety.dev pour plus de librairies, de templates, et de ressources.

Autres intégrations

svelte-preprocess

svelte-preprocess possède des fonctionnalités additionnelles non fournies par vitePreprocess telles que le support de Pug, Babel, et des styles globaux. Cependant, vitePreprocess est probablement plus rapide et nécessite moins de configuration, et est donc utilisé par défaut. Notez que CoffeeScript n’est pas supporté par SvelteKit.

Vous devrez installer svelte-preprocess avec npm i -D svelte-preprocess et l’ajouter à votre fichier de configuration svelte.config.js. Ensuite, vous devrez installer régulièrement la librairie correspondant à vos besoins comme npm i -D sass ou npm i -D less.

Plugins Vite

Puisque les projets SvelteKit sont basés sur Vite, vous pouvez utiliser les plugins Vite pour améliorer votre projet. Vous trouverez la liste des plugins disponibles sur vitejs/awesome-vite.

FÀQ des intégrations

La FÀQ de SvelteKit répond à plusieurs questions sur le sujet de “comment faire X avec SvelteKit”, ce qui peut vous être utile si vous avez toujours des questions.