Integrations

vitePreprocesspermalink

Including vitePreprocess in your project will allow you to use the various flavors of JS and CSS that Vite supports: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:

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

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

Adderspermalink

Run npx svelte-add to setup many different complex integrations with a single command including:

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

Directorypermalink

See sveltesociety.dev for a full listing of packages and templates available for use with Svelte and SvelteKit.

Additional integrationspermalink

svelte-preprocesspermalink

svelte-preprocess has some additional functionality not found in vitePreprocess such as support for Pug, Babel, and global styles. However, vitePreprocess may be faster and require less configuration, so it is used by default. Note that CoffeeScript is not supported by SvelteKit.

You will need to install svelte-preprocess with npm install --save-dev svelte-preprocess and add it to your svelte.config.js. After that, you will often need to install the corresponding library such as npm install -D sass or npm install -D less.

Vite pluginspermalink

Since SvelteKit projects are built with Vite, you can use Vite plugins to enhance your project. See a list of available plugins at vitejs/awesome-vite.

Integration FAQspermalink

The SvelteKit FAQ has a how to do X with SvelteKit, which may be helpful if you still have questions.