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.

svelte-preprocess automatically transforms the code in your Svelte templates to provide support for TypeScript, PostCSS, scss/sass, Less, and many other technologies (except CoffeeScript which is not supported by SvelteKit). The first step of setting it up is to add svelte-preprocess to your svelte.config.js. It is provided by the template if you're using TypeScript whereas JavaScript users will need to add it. After that, you will often only need to install the corresponding library such as npm install -D sass or npm install -D less. See the svelte-preprocess docs for more details.

vite-plugin-svelte also offers a vitePreprocess feature which will utilize Vite for preprocessing which may be faster and require less configuration. To use this option, first run npm install --save-dev @sveltejs/vite-plugin-svelte and then update your svelte.config.js:

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

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.