Import global PostCSS with Storybook 5

Question

In Storybook v4, I loaded my React application's PostCSS files with two steps:

1. First, I updated Storybook's Webpack configuration in ./.storybook/webpack.config.js.

    // https://github.com/storybookjs/storybook/issues/6319#issuecomment-477852640
    config.module.rules = config.module.rules.filter(
      f => !f.test || f.test.toString() !== '/\\.css$/'
    );

    config.module.rules.push({
      test: /\.css$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader'],
      include: path.resolve(__dirname, '../'),
    });

2. Then I added import "../src/styles.css" in./.storybook/config.js`

Unfortunately, after upgrading to Storybook v5 (now using a single main.js file), I'm unable to simply import my styles at the top of that file.

Given a React app generated from CRA, how do I load PostCSS styles such that they behave in the same way as running the application (which is simply import "./styles.css" in App.jsx) ?

Answer 1

This article answered things pretty clearly. config.js still exists in Storybook v5 and is used for global imports and configuration. I needed only to move the webpack configuration from config.js to main.js and keep the import as it was.