Blog > How to use SASS with SvelteKit

If you are wondering how you can use Sass with SvelteKit and are also very anxious to be able to do so because (with good reason) you cannot do without it, you are in the right place.

There is a very convenient solution that is right for you. In fact, there is a package that will allow you to use Sass in your application. It's called svelte-preprocess, to install it:

npm install -D svelte-preprocess

Once this is done we just have to configure it, and as you probably already know the document suitable for the purpose is svelte.config.js

// svelte.config.js
import preprocess from 'svelte-preprocess';

And we initialize the preprocessor

const config = {
  preprocess: preprocess({})
  ...
}

Once this is done you should already be able to write your scss within your component

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

However, there is another thing to consider. In fact, you might want to share a global style file with your entire application. For example you will want to share your global variables.

To solve this problem we assume that you have stored your generic style file under "src/style/" with the name app.scss. In that case you can add an optional parameter to the preprocessor configuration you just set up.

const config = {
  preprocess: preprocess({
     scss: {
       prependData: `@import './src/style/app.scss';`
     } 
  })
  ...
}

At the next restart the file will already be available.

Obviously inside app.scss you can in turn import any other file, such as the famous _variables.scss in which you have your style variables or your mixins.

// app.scss
@import '_variables';
...

That's it, and good work!