setting_up_for_css.md

Setting Up for CSS

CSS is a dark area of React. There are tons of ways to write CSS with React.

Arunoda wrote an article about that recently as well. Have a look at it.

So, React Storybook allows you to write CSS as you like. It's configurable.

TOC

• CSS in JavaScript
• CSS Webpack Loaders
• CSS with Meteor

CSS in JavaScript

By default, React Storybook doesn't come with any CSS setup. That's because there is no single default option everyone uses. But, if you write CSS using JavaScript, you can use Storybook without any configuration.

This is also true if you use a UI framework like Material UI.

CSS Webpack Loaders

Usually, we use CSS with the help of Webpack and we use CSS loaders inside our app. You can ask React Storybook to use the same loaders. It's pretty simple.

Let's say you are using the style loader inside your app. Then, your Webpack config would usually look like this:

var path = require('path')
var webpack = require('webpack')

module.exports = {

  ...

  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: __dirname
      }
    ]
  }
}

Now, let's customize React Storybook to use these CSS modules.

By default, React Storybook uses the babel loader for JavaScript. So, you don't need to add it.

Create a file .storybook/webpack.config.js with the following content:

const path = require('path');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
}

It's exactly similar to what we had before, but we have simply chosen to include the parent directory. That's because we are inside the .storybook directory.

That's it.

Now you can work with CSS files. Just follow these simple steps:

• If your app has a root CSS file(s), simply import it into .storybook/config.js.
• If you've imported CSS files directly into a component, you don't have to do anything.
• Just like this, you can use any CSS loader you want, whether it's CSS Modules, SCSS, Less or anything.

Refer to this project for more information.

CSS with Meteor

Meteor will automatically import any CSS files into your app. You can also use Less, SCSS or other preprocessors via build-time packages.

React Storybook cannot import CSS automatically. But instead, you can do this:

• You can configure React Storybook to use a CSS loader.
• Then import the main CSS file(s) into .storybook/config.js file.
• Then import component-specific CSS file(s) right into your story files.

Let's configure React Storybook to use the style loader inside a Meteor app.

• Make sure you've added React Storybook properly inside the app.
• Then install style loader with npm install --save-dev style-loader raw-loader.
• Then create a file called .storybook/webpack.config.js with the following content:

const path = require('path');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
}

Click here to see a complete example.

Refer following links to learn more about Meteor specific CSS configurations:

• #96
• #20