How to use scss in storybook with vite?

@deron 

To use SCSS in Storybook with Vite, you can follow these steps:

1. Install the necessary dependencies:

1

npm install sass vite-plugin-sass -D

1. Create a vite.config.js file in the root of your project with the following configuration:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { defineConfig } from 'vite'
import svelte from '@sveltejs/vite-plugin-svelte'
import sass from 'vite-plugin-sass'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
    sass()
  ]
})

1. Create a preview.js file in your Storybook configuration folder (e.g. .storybook):

1

import '../src/styles/index.scss'

1. Update your project's package.json scripts to use Vite for running Storybook.

1
2
3

"scripts": {
  "storybook": "start-storybook -s .storybook -p 6006"
}

1. Create an SCSS file in your project (e.g. src/styles/index.scss) and import it in your components.

1
2
3
4
5
6

$primary-color: blue;

.button {
  background-color: $primary-color;
  color: white;
}

1. Use the SCSS styles in your Svelte components:

1
2
3
4
5

<script>
  import './Button.scss';
</script>

<button class="button">Click me</button>

1. Start Storybook with Vite using the following command:

1

npm run storybook

Now you should be able to use SCSS styles in your Svelte components within Storybook running with Vite.