React Storybook - how to get styling?

I’ve just started to mess around with React Storybook. Very cool! (I also wanted to try out Chromatic, but it’s in a non-working state)

For some reason, styles don’t seem to work. So for instance, I have this component:

import React, { Component, PropTypes } from 'react';

export default class Clicker extends Component {
  render() {
    return <div className="Clicker">
      Test! {this.props.hasButtons ? <button>Hello</button> : ''}
    </div>
  }
}

Clicker.propTypes = {
  hasButtons: PropTypes.bool,
};

And the styles are in a separate SCSS file, but React Storybook is not aware of it, so my component looks totally plain. Is there a way to have Storybook recognize styles?

This worked for me. First I installed the webpack sass loader:

npm install node-sass sass-loader css-loader --save-dev

Then I added following loader to the config:

    {
      test: /\.scss$/,
      loader: 'style!css!sass',
      exclude: /node_modules/,
      include: path.resolve(__dirname, '../../')
    },

Finally, I imported the styles in my stories.js (which I am keeping alongside my component code and the styles – not sure whether this is recommended practice):

import './styles.scss'
1 Like

You can actually find a description on how to use CSS in the storybook docs.