Add SASS to Svelte JS with svelte-preprocess

Do you want to add support for SASS onto your Svelte project?

No worries, these are article has got you covered!

Let’s get started.

Step 1: Install Svelte preprocess and Node SASS

The first step is to install 2 dev dependencies onto your Svelte project.


npm i -D node-sass svelte-preprocess

node-sass – Is a Node library that binds Node.JS with LibSass. Click here to learn more about this module. NPM node-sass

svelte-preprocess – This module helps bind node-sass with your Svelte application.

It also supports other preprocessors such as TypeScript, CoffeeScript, Pug, and a few other ones.

To learn more about svelte-processor click here.

Step 2: Configure svelte-preprocess to rollup.config file


import svelte from 'rollup-plugin-svelte';
import autoPreprocess from 'svelte-preprocess';

export default (theme) => ({

  // ... other configs

	plugins: [
		svelte({
			preprocess: autoPreprocess()
		}),
	],
  ]
});

You must first import the svelte preprocess plugin, and add it inside the svelte plugin configuration.

If you’d like to add options to your SASS configurations you can do so.


import { scss } from 'svelte-preprocess';

svelte({
	preprocess: [
		scss({  /** options */ })
	]
}),

That’s it!

You can now start styling your Svelte application in SASS.

Step 3: Start styling away with SASS

In your src directory, let’s create another directory called styles.


$color: green;

Now, in the App.svelte file let’s use the SASS variable that was created, $color.


<h1>Hello Wordl!</h1>

<style type="text/scss">
  @import './styles/vars';

  h1 {
    color: $color;
    font-weight: 300;
    font-size: 64px;
  }
</style>

Check this out, for you to able to write SASS code in your style tag, you must add a property to the style directive.


<style type="text/scss">

If you don’t add type="text/scss", your SASS code will not work.

Happy SASS coding!

I like to tweet about Svelte and post helpful code snippets. Follow me there if you would like some too!