PostCSS in Storybook

[JordyPouw]

Hi,

This works great for the app. But I've also included storybook. In the storybook it doesn't seem to run the custom postcss config. Is there any way to work around this without ejecting create-react-app?

[mrmckeb]

Hi there, I'm having the same issue. For the moment, I've basically had to create a Webpack config for Storybook to get this working.

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: ['file-loader'],
            },
            {
                test: /\.css$/,
                loaders: ['style-loader', 'css-loader', 'postcss-loader'],
                include: path.resolve(__dirname, '../src'),
            },
        ],
    },
};

Some other react-app-rewired packages are including docs on how to integrate with Storybook. As an example: https://github.com/osdevisnot/react-app-rewire-contrib/tree/master/packages/react-app-rewire-emotion#usage-with-storybook

[jonathantneal]

Thanks for that info, @mrmckeb. I’m open to a PR that would add the minimal code necessary to use this Storybook.

---

Usage with Storybook

When using Storybook, create a Webpack configuration webpack.config.js file in the .storybook directory with the following code:

module.exports = config => {
  // configure postcss
  config = require('react-app-rewire-postcss')(config, {
     plugins: loader => [
      require('postcss-preset-env')()
    ]
  });

  return config;
};

[JordyPouw]

You can also keep their default config and only remove the postCSS options so it uses your postcss.config.js file.

module.exports = (baseConfig, env, defaultConfig) => {

  const cssRule = defaultConfig.module.rules.find(r => r.test.toString() === /\.css$/.toString());
  const postCssUse = cssRule.use.find(u => u.loader && u.loader.indexOf('postcss-loader') > -1);
  delete postCssUse.options;

  return defaultConfig;
};

Can't remember where I got it from, but credits to the person somewhere on the internet ;D.

[jonathantneal]

I’m open to a PR, but I’m closing this due to inactivity.