postcss config for storybook

.storybook

- webpack.config.js
- postcss.config.js
- config.js
- addons.js

config.js

import { configure } from '@storybook/react'

import '../src/styles/main.css'

const req = require.context('../stories', true, /.stories.js$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

postcss.config.js

module.exports = {
  plugins: {
    // PostCSS Preset Env includes autoprefixer and browsers option will be passed to it automatically.
    'postcss-preset-env': {
      stage: 0,
      browsers: 'last 2 versions'
      // importFrom: 'path/to/file.css'
    },
    'postcss-import': {},
    'postcss-nested': {}
  }
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              config: {
                path: './.storybook/'
              }
            }
          }
        ]
      }
    ]
  }
}

Thanks @Abramovick!
This was the only working postcss example for storybook5.

Has anyone tried configuring postcss with scss files?

Anyone has configuration postcss for Angular?

@Abramovick you saved my life 👍