React storybook PostCSS configuration

Question

I am setting up a storybook for my React app. I am facing an issue with PostCSS, apparently my storybook configuration does not process PostCSS and my styles are completely ignored.

This is my package.json:

{

  ...

  "devDependencies": {

    "@storybook/addon-actions": "^6.2.8",

    "@storybook/addon-essentials": "^6.2.8",

    "@storybook/addon-links": "^6.2.8",

    "@storybook/addon-postcss": "^2.0.0",

    "@storybook/react": "^6.2.8",

    "css-loader": "2.1.1",

    "extract-css-chunks-webpack-plugin": "4.3.2",

    "postcss-cssnext": "^3.1.0",

    "postcss-csso": "^3.0.0",

    "postcss-loader": "^3.0.0",

    "style-loader": "^2.0.0"

  }

}

and this is my main.js:

module.exports = {

  "stories": [

    "../src/**/*.stories.@(js|jsx|ts|tsx)",
  ],

  "addons": [

    "@storybook/addon-links",

    "@storybook/addon-essentials",

    "@storybook/addon-postcss"
  ]
}

Any help is very welcome.

Answer 1

Try upgrading postcss to version 8:

npm i -D postcss@8

and then, replace your current reference to the @storybook/addon-postcss inside main.js file to this:

{
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },