How to use scss with Svelte?

It might sound a simple question but it took me enough time to almost get frustrated learning svelte. It is simple, but documantations are not simple. So I wanted to walk through this process.

Table of Contents

• Svelte Installation
• Svelte Preprocess
• Sass

Svelte Installation

npx degit sveltejs/template my-svelte-project

npm install

npm run dev

Svelte Preprocess

npm install -D svelte-preprocess

After installation,
1)import svelte-preprocess in rollup.config.js.
2)add preprocess: sveltePreprocess()
-source for svelte preprocess

import svelte from 'rollup-plugin-svelte'
+ import sveltePreprocess from 'svelte-preprocess';

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

Sass

npm install -D sass

-source for this step

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

OR

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

Comments

[Souk Syp.]

Very nice !
For VS Code users, you'll get an error cannot find module sass node-sass.
The solution : daveceddia.com/svelte-with-sass-in...

[conspirisi]

Just scoping out the potential for Sass with Svelte. Does live preview with sass work ok?

[Avraham]

Worked perfectly for me,
pay attention

[Sikandar Bhide]

Easiest way to Add Svelte with scss
github.com/SikandarJODD/Svelte-Js-...

[Sikandar Bhide]

Svelte with Scss