Integrations

vitePreprocesspermalink

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

ts
// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: [vitePreprocess()]
};

Adderspermalink

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

• CSS - Tailwind, Bootstrap, Bulma
• database - Drizzle ORM
• markdown - mdsvex
• Storybook

Directorypermalink

Svelte と SvelteKit で使用できる パッケージ や テンプレート のリストは sveltesociety.dev でご覧いただけます。

Additional integrationspermalink

svelte-preprocesspermalink

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 pluginspermalink

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

Integration FAQspermalink

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