Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Unable to configure @storybook/addon-styling-webpack with css modules and Tailwind #27

Open
FranRom opened this issue Dec 16, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@FranRom
Copy link

FranRom commented Dec 16, 2024

Describe the bug

I have the same issue even after running npx @storybook/auto-config styling
Before I had:
{ name: '@storybook/addon-styling', options: { postCss: true } }
And it's actually working well if I currently use it after the migration to Storybook v8.4.7

Then I run manually npx @storybook/auto-config styling and this is the config I got (it seems detects Tailwind but not css module config as I can see in the README)

{
name: '@storybook/addon-styling-webpack',
  options: {
    rules: [
      {
        test: /\.css$/,
        sideEffects: true,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1
            }
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              implementation: require.resolve('postcss')
            }
          }
        ]
      }
    ]
  }
}

The css modules are not loaded.
I try all the configs in the addon doc without luck...

I also added this config but still not working, the custom class is undefined:

    {
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          {
            test: /\.css$/,
            sideEffects: true,
            use: [
              require.resolve('style-loader'),
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]'
                  }
                }
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  implementation: require.resolve('postcss')
                }
              }
            ]
          }
        ]
      }
    }

And If I don't add any extra rule css modules are loading well, but I still missed the tailwind css, so any help is very appreciated at this stage.
Thanks in advance

@FranRom FranRom added the bug Something isn't working label Dec 16, 2024
@FranRom
Copy link
Author

FranRom commented Dec 16, 2024

Image

@FranRom FranRom changed the title Unable to configure @storybook/addon-styling-webpack with css modules and Tailwind [Bug] Unable to configure @storybook/addon-styling-webpack with css modules and Tailwind Dec 16, 2024
@hanwenbo
Copy link

This is a very serious bug

@hanwenbo
Copy link

https://github.com/Negan1911/storybook-css-modules-preset/blob/master/index.js

this will solve your problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants