Skip to content

ls-age/svelte-preprocess-sass

Repository files navigation

svelte-preprocess-sass

CircleCI codecov

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>
Note: Before version 1, you had to explicitly allow `scss` attributes

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 node_modules 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)