How to use SCSS Sass in Svelte Components?

December 29, 2019

When I started with Svelte one surprise was the CLI was not too interactive and the default template doesn’t come with Sass support. Then for add sass support into .svelte components, we need to add a rollup package and do a few small changes.

These changes I will do on my project “password-strength-sv”, from the terminal I located in the project root, then using npm add the svelte-preprocess package as a dependency, if you have sass installed skip node-sass.

npm install -D svelte-preprocess node-sass

Import svelte-preprocess into the  rollup.config.js file.

import autoPreprocess from ‘svelte-preprocess’;

Add preprocess in plugins area for svelte.

plugins: [
   svelte({
      // enable run-time checks when not in production
      dev: true,
      // we'll extract any component CSS out into
      // a separate file — better for performance
      css: css => {
         css.write('public/build/bundle.css');
      },
      preprocess: autoPreprocess()
   }),

Perfect,  then change the line style in components and add the lang property lang=“scss”.

<div class="row">
    <h2>
        Hi <b>{passModel.user}</b>, your password {passModel.password} is {power}
    </h2>
</div>
<style type="text/scss">
    @import "../scss/form";
    h2 {
        color: $default;
    }

</style>

Hopefully, that will give you a bit of help with Svelte, if you enjoyed this post, share it.