vitePreprocess in SvelteKit triggers Preprocessor dependency "sass" not found when using scss

Question

I have a brand new project using SvelteKit. By default, vitePreprocess is used to handle scss and other files, as described in the docs:

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:

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

However, if I use lang="scss" in my files:

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

I get the following error:

Error: Error while preprocessing /Users/francesco.leardini/Documents/pet projects/budget-tracker/src/routes/+page.svelte - Preprocessor dependency "sass" not found. Did you install it?
    at loadPreprocessor (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36922:19)
    at scss (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36962:20)
    at compileCSS (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36482:40)
    at async preprocessCSS (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:36644:12)
    at async style (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:2055:20)
    at async process_single_tag (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46844:27)
    at async Promise.all (index 0)
    at async replace_in_code (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46732:26)
    at async process_tag (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46858:29)
    at async preprocess (file:///Users/francesco.leardini/Documents/pet%20projects/budget-tracker/node_modules/svelte/compiler.mjs:46898:30)

Shouldn't scss files be handled out of the box as stated in the docs?

Answer 1

Add the dependency sass to your project first?

npm add -D sass or with whatever package manager you use.