svelte-preprocess-sass

Svelte preprocessor function for Sass. Uses Dart Sass.

Install

npm install --save-dev @nsivertsen/svelte-preprocess-sass

Usage

If you're using the Svelte compiler API directly:

import * as svelte from 'svelte';
import sass from 'svelte-preprocess-sass';

const processed = await svelte.preprocess(source, {
  style: sass()
});

If you're using Rollup with rollup-plugin-svelte:

import svelte from 'rollup-plugin-svelte';
import sass from 'svelte-preprocess-sass';

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

Now, add a type="text/scss" attribute to your components' style tags, and you're good to go:

<style type="text/scss">
  $color: blue;

  h1 {
    color: $color;
  }
</style>

Options

The function exported by svelte-preprocess-sass optionally takes an options object as a first argument. The only option it cares about is attribute. All other options are passed on to Sass (see the Sass documentation for available options).

You can use the attribute option to configure the HTML attribute that determines which style tags should be processed by Sass. For example:

const processed = await svelte.preprocess(source, {
  style: sass({
    attribute: { key: 'lang', value: 'sass' }
  })
});

tells svelte-preprocess-sass to process style tags with a lang="sass" attribute:

<style lang="sass">
  $color: blue;

  h1 {
    color: $color;
  }
</style>

The default is type="text/scss";

License

MIT