SvelteKitAppendix

Integrations

vitePreprocess

プロジェクトに vitePreprocess を含めることで、Vite がサポートする様々な JS や CSS のフレーバー (TypeScript、PostCSS、SCSS、Less、Stylus、SugarSS) を使用することができます。プロジェクトを TypeScript でセットアップすると、TypeScript はデフォルトで含まれるようになります:

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

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

Adders

npx sv add によって、様々な複雑なインテグレーションを単一のコマンドでセットアップすることができます:

prettier (formatting)
eslint (linting)
vitest (unit testing)
playwright (e2e testing)
lucia (auth)
tailwind (CSS)
drizzle (DB)
paraglide (i18n)
mdsvex (markdown)
storybook (frontend workshop)

Additional integrations

svelte-preprocess

svelte-preprocess は、Pug、Babel、global styles のサポートなど、vitePreprocess には無い機能があります。しかし、vitePreprocess はより速く、設定が少ないため、デフォルトでは vitePreprocess が使用されます。SvelteKit は CoffeeScript をサポートしていないことにご注意ください。

svelte-preprocess をインストールするには npm install --save-dev svelte-preprocess を実行し、ご自身で svelte.config.js に追加する必要があります。その後、npm install -D sass や npm install -D less など、対応するライブラリのインストールが必要になることが多いようです。

Vite plugins

SvelteKit プロジェクトは Vite で構築されているため、Vite plugin を使用してプロジェクトを拡張することができます。利用可能な plugin のリストは vitejs/awesome-vite をご覧ください。

Integration FAQs

SvelteKit FAQ に SvelteKit で X をする方法があるので、もしまだ不明点があるようでしたら役に立つかもしれません。

Edit this page on GitHub

previous next

Frequently asked questions Breakpoint Debugging