Note that this addon doesn't work with CRA or <6.2 storybook

[phated]

[ranisalt]

Why?

[phated]

Before Storybook 6.2, it used to install additional loaders on .css and that causes this to crash. In the same way, CRA already had postcss and other loaders on the .css extension that crash this.

[sielay]

I managed to workout way that works with CRA, you could amend your plugin to do the same

// .storybook/main.js

webpackFinal: (config) => {

    const replaceCRAPostCSS = (config) => {
      if (!config) return;
      if (Array.isArray(config)) {
        return config.forEach(replaceCRAPostCSS);
      }
      if (typeof config === 'object') {
        const { test, use } = config;
        if (test && use && test.toString() === '/\\.css$/') {
          const loader = use.find((loader) => {
            const path = typeof loader === 'string' ? loader : loader.loader;
            return path && path.match(/postcss-loader/);
          });

          if (loader) {
            loader.options = {
              config: {
                path: require.resolve('../postcss.config.js')
              }
            };
          }
          return;
        }
        // need that as they use oneOf in use too
        return Object.values(config).forEach(replaceCRAPostCSS);
      }
    };
    replaceCRAPostCSS(config);
    return config;
}

[phated]

@sielay We won't be changing the plugin based on your suggestion because it changes the way CRA works between your storybook and starting your application. CRA doesn't load postcss config files.

[johnpangalos]

Is there anyway we could add these requirements to the Readme? Might save people some time.