New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,439
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon

Integrate Sass and Storybook

Sass (also known as scss) is a popular CSS preprocessor that allows developers to write more maintainable and reusable stylesheets. This recipe shows you how to get the most out of Sass in Storybook.

Some configurations of Storybook already come pre-configured to support Sass. If your project meets the following, you're likely ready to go.

  1. Storybook >= 7.x with the vite builder.
  2. Storybook >= 7.x with the @storybook/nextjs framework.
  3. Storybook >= 6.x with the @storybook/preset-create-react-app and react-scripts@2.x.x or higher.

How to setup Sass and Storybook

Sass is a popular CSS preprocessor that allows developers to write more maintainable and reusable stylesheets. Storybook is an industry-standard tool for developing and testing UI components in isolation. With the help of the @storybook/addon-styling package, developers can easily incorporate Sass stylesheets into their Storybook components.

Adding @storybook/addon-styling

First of all, install the required dependencies:

Then add register @storybook/addon-styling in your main.js like so:

Import global styles

If you have any global styles you would like to expose for your stories, you can now import them into your preview.js file:

Get involved

Now you're ready to use Sass with Storybook. 🎉 If you use Sass at work, we'd love your feedback on the Sass + Storybook experience.

Join the maintainers and our thriving community in Discord.

Join the community
6,319 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI