New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,054
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.

Prerequisites

This recipe assumes that you have an app using Sass and have just set up Storybook >=7.0 using the getting started guide. Don’t have this? Then run:

Terminal
Loading...

1. Add @storybook/addon-styling-webpack

Heads up!

Some Storybook configurations are pre-configured to support Sass. If your project meets any of the following criteria, you can skip to the next step.

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

Run the following script to install and register the addon:

Terminal
Loading...

This will run a configuration script that will walk you through setting up the addon. When prompted, select Sass from the configuration options.

Did the configuration script fail?

Under the hood, this command runs npx @storybook/auto-config styling, which is responsible for reading your project and attempting to configure your Storybook Webpack for your desired tools. If running that command directly does not resolve your issue, please consider filing a bug report on the @storybook/auto-config repository so that we can further improve it. For manual configuration instructions for Sass, you can refer to the documentation here.

2. 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:

.storybook/preview.js
Loading...

2.1. Angular

If you are using Angular, you will need to add your global scss file(s) to your angular.json file instead. This will make sure your styles are processed by Angular's Webpack and injected into the preview iframe where your stories are rendered.

angular.json
Loading...

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,495 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI