const paths = require("../config/paths")

module.exports = {
  stories: [
    "../stories/*.stories.mdx",
    "../stories/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    config.resolve.modules = [
      paths.appSrc,
      "node_modules",
      "platform/storybook"
    ]

    /**
     * CSS handling, specifically overriding postcss loader
     * since storybook's own postcss dep is always behind and always causing errors
     */
    // Find the only Storybook webpack rule that tests for css
    const cssRule = config.module.rules.find(rule =>
      "test.css".match(rule.test)
    )
    // Which loader in this rule mentions the custom Storybook postcss-loader?
    const loaderIndex = cssRule.use.findIndex(loader => {
      // Loaders can be strings or objects
      const loaderString = typeof loader === "string" ? loader : loader.loader
      // Find the first mention of "postcss-loader", it may be in a string like:
      // "@storybook/core/node_modules/postcss-loader"
      return loaderString.includes("postcss-loader")
    })
    // Simple loader string form, removes the obsolete "options" key
    cssRule.use[loaderIndex] = "postcss-loader"

    // Return the altered config
    return config
  }
}

const paths = require("../config/paths")

module.exports = {
  stories: [
    "../stories/*.stories.mdx",
    "../stories/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async(config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    config.resolve.modules = [paths.appSrc, "node_modules", "platform/storybook"]

    // Return the altered config
    return config
  }
}

--- 
+++ 
@@ -6,12 +6,35 @@
     "../stories/*.stories.@(js|jsx|ts|tsx)"
   ],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-  webpackFinal: async(config, { configType }) => {
+  webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
 
-    config.resolve.modules = [paths.appSrc, "node_modules", "platform/storybook"]
+    config.resolve.modules = [
+      paths.appSrc,
+      "node_modules",
+      "platform/storybook"
+    ]
+
+    /**
+     * CSS handling, specifically overriding postcss loader
+     * since storybook's own postcss dep is always behind and always causing errors
+     */
+    // Find the only Storybook webpack rule that tests for css
+    const cssRule = config.module.rules.find(rule =>
+      "test.css".match(rule.test)
+    )
+    // Which loader in this rule mentions the custom Storybook postcss-loader?
+    const loaderIndex = cssRule.use.findIndex(loader => {
+      // Loaders can be strings or objects
+      const loaderString = typeof loader === "string" ? loader : loader.loader
+      // Find the first mention of "postcss-loader", it may be in a string like:
+      // "@storybook/core/node_modules/postcss-loader"
+      return loaderString.includes("postcss-loader")
+    })
+    // Simple loader string form, removes the obsolete "options" key
+    cssRule.use[loaderIndex] = "postcss-loader"
 
     // Return the altered config
     return config
Use our top level postcss version in storybook

Storybook generally updates late which causes build failures
