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?

Lyokolux · Accepted Answer · 2023-01-26 08:59:43Z

2

Add the dependency sass to your project first?

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

answered Jan 26, 2023 at 8:59

Lyokolux

1,4452 gold badges18 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Francesco Over a year ago

I can try that, however by reading the docs, vitePreprocess should handle scss directly. Sass as an explicit dependency was needed for svelte-preprocess plugin, as far as I know.

McKenzy1971 · Accepted Answer · 2023-05-29 12:05:22Z

0

Just add sass to the devDependencies solved the problem for me. Installing it via npm add -D sass or yarn install --dev sass hasn't worked for me. I had to manually add it to devDependencies.

answered May 29, 2023 at 12:05

McKenzy1971

571 silver badge7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related