How to use scss with Svelte?
AW A RE

AW A RE @mefaba

About: Follow me on github. Lets talk projects! Prefer to build with golang or javascript

Location:
Toronto, CA
Joined:
Mar 28, 2020

How to use scss with Svelte?

Publish Date: Feb 8 '21
20 5

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

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')
      },
    }),
  ],
}
Enter fullscreen mode Exit fullscreen mode

Sass

npm install -D sass

-source for this step

<style type="text/scss">
   @import "./styles.scss";
</style>
Enter fullscreen mode Exit fullscreen mode

OR

<style lang="scss">
    ...
</style>
Enter fullscreen mode Exit fullscreen mode

Comments 5 total

Add comment