Hey, pssst…yeah, you…come over here….do you need a storybook config? Yeah you heard me. You need access to global SCSS variables don’t you? Well I got just the medicine for you. Look at this hidden in my unbelievably stained trench coat…yeahhhhh it’s a killer webpack config. What? No, no, put that briefcase of gold bars away, your money is no good here amigo….this one’s on the house. Imma show you the world.

What is Storybook?

It’s pretty damn handy is what it is. Storybook is an open source tool for developing UI components in isolation. It’s mostly coupled with React, Angular and Vue.

We however, will be using React. The goal of this article is to create a configuration for Storybook that gives your stories global access to SCSS variables, TypeScript, React, Babel and other goodies. This is the most killer storybook build you’ll ever need.

Can’t I follow the docs for a configuration?

Yeah, if you want to build out your UI components having to include all your SCSS variables manually, straight up settle for CSS or not have access to your SCSS variables? The official docs will only take you so far but it misses out a lot of the core issues you’ll come across wiring up a solid storybook webpack build. Then you’ll have to play minesweeper with all the package versions for each dependency…thankfully for you, I’ve already suffered for you.

Installation

Luckily I’m not going to ask you to manually bit by bit put this whole config together. I’ve already done the heavy lifting for you. If however you decide you want to cater it to your needs. Feel free to chop and change what you don’t want after cloning it.

First, git clone that bad boy down.



cd killer-storybook-config git clone https://github.com/hghazni/killer-storybook-config.git cd killer-storybook-config

Once you’ve got the repo, we need to:-

npm i

npm run storybook

And that’s about it 🎉

Now if you want to run React after installing the packages, simply:-