Integrations

Preprocessorspermalink

Preprocessors transform your .svelte files before passing them to the compiler. For example, if your .svelte file uses TypeScript and PostCSS, it must first be transformed into JavaScript and CSS so that the Svelte compiler can handle it. There are many available preprocessors. The Svelte team maintains two official ones discussed below.

vitePreprocesspermalink

vite-plugin-svelte offers a vitePreprocess feature which utilizes Vite for preprocessing. It is capable of handling the language flavors Vite handles: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. For convenience, it is re-exported from the @sveltejs/kit/vite package. If you set your project up with TypeScript it will be included by default:

ts
// svelte.config.js
import { vitePreprocess } from '@sveltejs/kit/vite';
 
export default {
  preprocess: [vitePreprocess()]
};

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.

Adderspermalink

Svelte Adders allow you to setup many different complex integrations like Tailwind, PostCSS, Storybook, Firebase, GraphQL, mdsvex, and more with a single command. Please see sveltesociety.dev for a full listing of templates, components, and tools available for use with Svelte and SvelteKit.

Integration FAQspermalink

The SvelteKit FAQ has a section on integrations, which may be helpful if you still have questions.