New
Community Showcase #5Visual test with Chromatic
Star79,046
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 Less and Storybook

Less is a popular CSS preprocessor that helps you write smaller, reusable styles. This recipe shows you how to get the most out of Less in Storybook.

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.

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI