sample-svelte-scss-lib-app

This repository demonstrates how one can build a svelte component library with svelte-preprocess-sass.

Assuming you provide styles via a package published as my-lib on npm

You can provide variables and default variables in a file called theme.scss (note the !default):

// theme.scss inside the 'my-lib' package
$primary: red !default;
$primary-inverted: white !default;

To import these, add node_modules to includePaths:

// rollup.config.js
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'),
            ],
          },
          { name: 'scss' }
        ),
      },
    }),
  ],
};

In svelte components, import the theme file:

<!-- src/components/Button.svelte -->
<style type="text/scss">
  @import 'my-lib/theme.scss';

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

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

As of now, your component renders a button with a red background and white text.

So, now you want to override these theme styles

Add another include path:

// rollup.config.js
sass({
  includePaths: [
    // Allow imports from 'src/styles/overrides'
    './src/styles/overrides',

    // Allow imports from 'node_modules'
    join(__dirname, 'node_modules'),
  ],
});

And provide an override stylesheet for my-lib:

// src/styles/overrides/my-lib/theme.scss
$primary: blue;

// Import original theme
@import '../../../../node_modules/my-lib/theme.scss';

As a result your component will be rendered with a blue background and a white text color.