Some configurations of Storybook already come pre-configured to support Sass. If your project meets the following, you're likely ready to go.
- Storybook >= 7.x with the
vitebuilder. - Storybook >= 7.x with the
@storybook/nextjsframework. - Storybook >= 6.x with the
@storybook/preset-create-react-appandreact-scripts@2.x.xor 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.