Skip to main content

Intégrations

vitePreprocess

Inclure vitePreprocess dans votre projet va vous permettre d’utiliser les différentes options de CSS que Vite supporte : PostCSS, SCSS, Less, Stylus, et SugarSS. Si vous mettez en place votre projet avec TypeScript, ce plugin sera inclus par défaut :

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

export default {
  preprocess: PreprocessorGroup[]preprocess: [function vitePreprocess(opts?: VitePreprocessOptions): import("svelte/compiler").PreprocessorGroupvitePreprocess()]
};

Vous devrez également utiliser un préprocesseur si vous utilisez TypeScript avec Svelte 4. TypeScript est supporté nativement avec Svelte 5 si vous utilisez uniquement la syntaxe de types. Pour utiliser des syntaxes TypeScript plus complexes avec Svelte 5, vous devrez tout de même utiliser un préprocesseur, et dans ce cas vous pourrez utiliser vitePreprocess({ script: true }).

Adders

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)

Dossier

Retrouvez sur sveltesociety.dev une liste complète de paquets et de templates pouvant être utilisés avec Svelte et SvelteKit.

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 install --save-dev 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 install -D sass ou npm install -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.

Modifier cette page sur Github llms.txt