Appendix
Integrations
Edit this page on GitHubvitePreprocesspermalink
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.jsimport {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.