SCSS is a popular CSS extension language that can make it easier to write styles for your svelte webapp. Svelte is capable of supporting SCSS (as well as other CSS extensions), but some configuration is required.

First, install the sass preprocessor:

$ npm install --save-dev sass

Next, you need to use vitePreprocess from vite-plugin-svelte. This package should already be installed so you just need to update your configuration:

/svelte.config.js

import adapter from "@sveltejs/adapter-auto"
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"

import path from "path"

const config = {
    kit: {
        adapter: adapter()
    },
    preprocess: [vitePreprocess()]                             
}

export default config

Now you can use SCSS in svelte components by specifying lang="scss" for your style tags:

/src/routes/+page.svelte

<style lang="scss">
  ...
</style>

That’s it! Enabling SCSS support in your svelte components is easy. You can also use the same method to enable support for other CSS extension languages.