PostCSS/CSSmodules css not loading in Storybook

[BenSwennen]

I have the following component that imports styles are generated via PostCSS and CSSmodules and works fine if I use them in my app normally, but the styles won't show up in storybook:

import React, { PropTypes } from "react";
import styles from "./Avatar.scss";

const Avatar = props => (
  <div className={styles.placeholder}>
    { props.placeholder }
  </div>);
);

Here is my webpack.config.js (which is basically a copy of the webpack.config.js in root) in .storybook:

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const mixins = require("../src/_mixins");
const variables = require("../src/_variables");

// PostCSS plugins
const cssnext = require("postcss-cssnext")({ browsers: "last 2 versions" });
const cssMixins = require("postcss-mixins")({ mixins });
const nestedCss = require("postcss-nested");
const calc = require("postcss-calc");
const simpleVars = require("postcss-simple-vars")({
  variables: () => variables,
  unknown: (node, name, result) => node.warn(result, `Unknown variable ${name}`),
});

const ExtractTextPluginConfig = new ExtractTextPlugin(
  "[name][hash].css", { allChunks: true }
);

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader"),
        include: path.resolve(__dirname, "../"),
      },
      {
        test: /\.scss$/,
        exclude: [/node_modules/, /\.global\.scss$/],
        loader: ExtractTextPlugin.extract(
          "style-loader",
          ["css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]",
          "postcss-loader"].join("!")
        ),
        include: path.resolve(__dirname, "../"),
      },
      {
        test: /\.global\.scss$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          ["css-loader", "postcss-loader"].join("!")
        ),
        include: path.resolve(__dirname, "../"),
      },
    ],
  },

  plugins: [
    ExtractTextPluginConfig,
  ],

  postcss: () => (
    [cssnext, cssMixins, simpleVars, nestedCss, calc]
  ),
};

Suggestions in #270 couldn't help me. Can you please tell me what I'm doing wrong?

[leebenson]

This is the config from my current project...

const path = require('path');

// postcss
const cssnext = require('postcss-cssnext');
const postcssPartialImport = require('postcss-partial-import');
const postcssMixins = require('postcss-mixins');
const postcssSimpleVars = require('postcss-simple-vars');

const PATHS = require('../paths');

module.exports = {
  resolve: {
    root: [
      PATHS.app,
      path.resolve(__dirname, '../node_modules'),
    ],
  },

  module: {
    loaders: [
      {
        test: /\.(png|woff|woff2|svg|ttf|eot|jpg)$/,
        loader: 'file',
      },
      {
        test: /\.css$/,
        loader: 'style!css?modules=1!postcss',
      },
    ],
  },

  postcss(instance) {
    return [
      postcssPartialImport({
        dirs: [
          PATHS.app,
        ],
        addDependencyTo: instance,
      }),
      postcssMixins(),
      postcssSimpleVars(),
      cssnext(),
    ];
  },
};

You probably don't need ExtractTextPlugin- its purpose is to move require('*.css') statements into a separate file so that your JS is valid.

Since Storybook runs within a webpack'd environment, it natively runs any of those statements through loaders, so you don't have to physically remove them. ExtractTextPlugin is good for production environments (like browsers or bundling your JS into a working server-side bundle) - it's typically not needed inside of webpack-dev-server, which is what Storybook uses.

Start with my config above and hack away at the plug-ins you need.

[leebenson]

(This is a minor comment, but I noticed you're using .scss files. I presume you were using the sass loader and then made the switch to postcss? You might want to rename those .css to avoid confusion)

[BenSwennen]

Thanks @leebenson, your config helped me and now it works!

(Concerning your remark about .scss files, indeed I made the switch to postcss from sass. There is a ticket in my backlog to change this)

[craigbeck]

@BenSwennen so what was the issue?