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").PreprocessorGroup
vitePreprocess } from '@sveltejs/vite-plugin-svelte';
export default {
preprocess: PreprocessorGroup[]
preprocess: [function vitePreprocess(opts?: VitePreprocessOptions): import("svelte/compiler").PreprocessorGroup
vitePreprocess()]
};
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