Add SASS to Svelte JS with svelte-preprocess

Svelte out of the box only lets you write CSS. But it made wonder if Svelte can support SASS/SCSS?

And the answer is, yes! You can write SASS code by using the libraries node-sass and svelte-preprocess.

First, if you’re looking to become a strong and elite Svelte developer within just 20 video courses, you might want to look into Level Up Tutorials, Building Svelte Components course for just $49.99. With giant tech companies such as Apple, and Spotify now hiring for svelte developers, wouldn’t it be nice to get ahead of everyone else? Level Up Tutorials will make you into an elite Svelte developer, and will teach you the skillset for you to have the confidence to start applying for Svelte developer positions.

Click here to become a strong and elite Svelte developer: Building Svelte Components course.

Disclaimer: The two Building Svelte Components course links are affiliate links where I may receive a small commission for at no cost to you if you choose to purchase a plan from a link on this page. However, these are merely the course I fully recommend when it comes to becoming a Svelte engineer expert.

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!