SvelteKit

Initialization

npm create svelte@latest <project-name> # Based on vite

More at Creating a project (kit.svelte.dev).

Usage

vite <command> [options]

vite dev
vite build
vite preview

# Use with npm scripts
npm run dev
npm run build
npm run preview

// package.json e.g.:
{
  "scripts": {
    "dev": "vite --port <port-number> --open --host",
    "build": "tsc && vite build",
    "preview": "vite preview --port <port-number> --open --host"
  }
}

More at Command Line Interface (kit.svelte.dev).

Configuration

Using SCSS

Svelte re-exports vitePreprocess from vite-plugin-svelte through @sveltejs/kit/vite for preprocessing. So we just need to use it.

// svelte.config.js e.g.:
import { vitePreprocess } from '@sveltejs/kit/vite';

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

Using Global Styles

Sadly, vitePreprocess does not support global styles. For that we need svelte-preprocess and the actual preprocessor sass.

npm i -D svelte-preprocess sass

// svelte.config.js e.g.:
import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess({ /* ... */ })
};

More at Integrations.

Using Vercel Adapter

npm i -D @sveltejs/adapter-vercel

// svelte.config.js e.g.:
import vercel from '@sveltejs/adapter-vercel';

export default {
  kit: {
    adapter: vercel ({ /* ... */ })
  }
};

More at Vercel (kit.svelte.dev).