This recipe assumes that you are using Storybook >= 7.0. If you haven't set up Storybook yet, run the following command in the root of your project:
How to setup Less and Storybook
Less 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 Less stylesheets into their Storybook components.
Adding @storybook/addon-styling
Using Vite to build your Storybook? Then you don't need to add options.less as Vite works with Less out-of-the-box 🎉
First of all, install the required dependencies:
Then 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 Less with Storybook. 🎉 If you use Less at work, we'd love your feedback on the Less + Storybook experience.
Join the maintainers and our thriving community in Discord.