CSS modules

Hi, I’m trying to use SASS styles like this in my React components:

import React, { Component } from 'react';
import Drawer from 'material-ui/Drawer';
import { Link } from 'react-router' ;
import styles from './sidebar.scss' ;

class Sidebar extends Component {
  constructor(props) {
    super(props);
    this.state = { open: true };
  }

  render() {
    return (
      <div>
        <Drawer className={styles.drawer} open={this.state.open}>
          <div className={styles.header}>
            <Link className={styles.profilePic} to="#">Item</Link>
          </div>
          <Link className={styles.item} to="#">Profile</Link>
          <Link className={styles.item} to="#">Dashboard</Link>
          <Link className={styles.item} to="#">Charts</Link>
          <Link className={styles.item} to="#">Calendar</Link>
        </Drawer>
      </div>
    );
  }
}

export default Sidebar;

Styles are working in my app normally, all good. But when I open them in storybook, styles won’t show up. Is this problem with my webpack setup for storybook? Here is how it looks like:

const path = require('path');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
      {
        loader: 'url-loader?limit=10000',
        test: /\.(gif|jpg|png|svg)$/,
        include: path.resolve(__dirname, '../')
      }, {
        loader: 'url-loader?limit=1',
        test: /favicon\.ico$/,
        include: path.resolve(__dirname, '../')
      }, {
        loader: 'url-loader?limit=100000',
        test: /\.(ttf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
        include: path.resolve(__dirname, '../')
      },
      {
        loader: 'style-loader!css-loader',
        test: /\.css$/,
        include: path.resolve(__dirname, '../'),
        exclude: path.resolve(__dirname, '../node_modules')
      },
      {
        loader: 'style-loader!css-loader!sass-loader',
        test: /\.scss$/,
        include: path.resolve(__dirname, '../'),
        exclude: path.resolve(__dirname, '../node_modules')
      },
    ]
  },
  sassLoader: {
    includePaths: path.resolve(__dirname, '../src/browser')
  },
};

If I import styles with import './sidebar.scss' ; and then write class names explicitly into classNames, then styles are used correctly in storybook (so SASS files are loaded without problem, loaders in webpack works).

What should I do if I want to use styles like I shown in my Sidebar component on top of this comment?

[MarcoWorms]

For webpack 2 I’m using this in .storybook/webpack.config.js and it’s working fine:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
}

[MarcoWorms]

I got it to work, thanks. Just for future reference, if you want to just add css modules to your react storybook project:

1. add a webpack.config.js on your .storybook directory

2. put this inside:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css?modules'
      }
    ]
  }
}

1. be happy with sane css in storybook 😃