svelte-preprocess-sass

Svelte preprocessor for sass

Installation

npm install --save-dev svelte-preprocess-sass sass

Usage

Using rollup-plugin-svelte

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import { sass } from 'svelte-preprocess-sass';
...

export default {
  ...
  plugins: [
    ...
    svelte({
      preprocess: {
        style: sass(),
      },
    }),
  ],
};

Now all <style> elements in your components that have a type="text/sass" or lang="sass" attribute will be preprocessed by sass.

<style type="text/sass">
  $primary: red

  button
    color: $primary
</style>

<button on:click>Click me</button>

Using SCSS

...just use type="text/scss" or lang="scss" in your components:

<style type="text/scss">
  $primary: red;

  button {
    color: $primary;
  }
</style>

<button on:click>Click me</button>

<summary>Note: Before version 1, you had to explicitly allow `scss` attributes</summary>

From the old readme:

If you prefer the non-indented syntax you have to supply the name option:

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import { sass } from 'svelte-preprocess-sass';
...

export default {
  ...
  plugins: [
    ...
    svelte({
      preprocess: {
        style: sass({}, { name: 'scss' }),
      },
    }),
  ],
};

Passing options to sass

The sass function passes the first argument to the sass compiler, e.g.:

...
sass({
  plugins: [
    ...
  ]
})

Common options:

Allow imports from nodemodules_ via the includePaths option:

import { join } from 'path';
import svelte from 'rollup-plugin-svelte';
import { sass } from 'svelte-preprocess-sass';

export default {
  ...
  plugins: [
    ...
    svelte({
      preprocess: {
        style: sass({
          includePaths: [
            // Allow imports from 'node_modules'
            join(__dirname, 'node_modules'),
          ]
        }),
      },
    }),
  ],
};

For available options visit the sass and dart-sass docs.

Filtering styles

The sass function passes the second argument to svelte-preprocess-filter, e.g.:

...
sass(
  {}, // Empty sass options
  { all: true } // Preprocess all styles
)

Creating component libraries

Take a look at the LukasHechenberger/sample-svelte-scss-lib repository for an example of how to create component libraries with extendable styles. (Discussed in #95)

1.0.0 (2021-01-11)

Features

Detect indented syntax from language attribute (#104) (db0484c)

BREAKING CHANGES

Now supports both SASS and SCSS syntax without the need to set the name filter option.

If you enabled SCSS before, just remove the filter options to support both:

export default { ... plugins: [ ... svelte({ preprocess: { - style: sass({}, { name: 'scss' }), + style: sass(), }, }), ], };

Package detail