Storybook: Custom webpack Configurations: postcss

[stewartduffy]

Hi there,

Have been playing around with storybook & I like it, but having trouble with the Custom webpack Configurations. I am trying to use postcss-loader with autoprefixer, and having no luck. Does storybook support this? I read in the docs it says the following:

"_Usually, there are a lot of things we can do with webpack, but React Storybook allows you to add only custom loaders and plugins_."

I am guessing this is why, but just checking incase this is an issue with my setup?

See code for /.storybook/webpack.config.js below

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

module.exports = {
  module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader",
        include: path.resolve(__dirname, '../')
      }

    ]
  },
  postcss: function() {
    return [precss, autoprefixer];
  }
}

[arunoda]

Good timing. Started a discussion here: https://github.com/kadirahq/react-storybook/pull/46#issuecomment-205640580

We can do this soon.

[arunoda]

Now you can add custom webpack config as shown above.
Try with the version: 1.5.0

[stewartduffy]

After upgrading to latest version this works nicely! Thanks!

[stewartduffy]

Although you have to use array syntax for loaders, piping doesn't work

[arunoda]

Great. Hope we can close this now.

[stewartduffy]

Yep close away!

[manishoo]

has this not been fixed ?

[ndelangen]

If you are experiencing something that looks like this issue again, please open a new issue.. Any info in this issue will be related to webpack 1 and is stale / incorrect now.

👍