reactjs - How to use PostCSS plugins with ejected CRA and Storybook

Question

I have an ejected create-react-app with Storybook. In order to use some additional PostCSS plugins, I've added postcss-nested and everything works fine when I start/build the cra project but it doesn't work with Storybook. It looks like Storybook ignores PostCSS and compiles everything as simple css.

I've tried to rewrite it but it doesn't work.

I'll be grateful if you help me.

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /.module.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: ['postcss-nested'],
            },
          },
        },
      ],
      include: __dirname,
    });

    config.resolve.modules.push(process.cwd() + '/node_modules');
    config.resolve.modules.push(process.cwd() + '/src');
    config.resolve.symlinks = false;

    return config;
  },
};

And I tried to create a separate file

module.exports = {
  plugins: [
    require('postcss-nested'),
  ]
};

question from:https://stackoverflow.com/questions/65896560/how-to-use-postcss-plugins-with-ejected-cra-and-storybook

Answer 1

It looks like it's working

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          // ident: 'postcss',
          options: {
            ident: 'postcss',
            plugins: [require('postcss-nested')],
          },
        },
      ],
      include: __dirname,
    });
    config.resolve.modules.push(process.cwd() + '/node_modules');
    config.resolve.modules.push(process.cwd() + '/src');
    config.resolve.symlinks = false;

    return config;
  },
};