Configure Sass in Svelte Kit

 Sass is the most mature, stable, and powerful professional grade CSS extension language. Svelte simplify the use of Sass. 

 

In order to use Sass or scss in Svelte app we have to use the preprocess.

First up all install the node dependencies and sass.

npm i --save-dev bootstrap node-sass svelte-preprocess

In our project locate the  svelte.config.js and import the svelte preprocess and add it to the config object as follows.

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */

const config = {
kit: {
adapter: adapter()

},
preprocess: [preprocess() ]
};
export default config;

Lets make sure it is working and a simple scss style.

<style lang="scss" type="text/scss" >

$color: red;
h1{
color: $color;
}

</style> <h1>Hello world</h1>

 The heading will be show up in red. 😆

Read more sass guides