How to use scss in storybook with vite?

Member

by deron , in category: Javascript , 9 months ago

How to use scss in storybook with vite?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lottie , 9 months ago

@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.