Only seeing Local Scope class names from CSS Modules in storybook@8.0.8

[xta]

Summary

I am only seeing Local Scope class names from CSS Modules in storybook@8.0.8 for my component's element classes. The outer DOM (outside my component) is using regular storybook (not local scoped, human readable) class names.

In my storybook react component, I'm using regular class module names ('.label', '.container', etc).

Expected

• The rendered component to have similar class names: <div class="label container .... Something human readable

Actual

• My component has these type of localized class names: <div class="N5SHvOyzzUf4G2DySKpj kORNthD1Vxlqj29c11XC xR339zPV0YGhHfzeefIN ...

Additional information

using @storybook/addon-styling-webpack addon with rules from the doc examples

// .storybook/main.ts

  addons: [
    {
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          // Replaces existing CSS rules to support CSS Modules
          {
            test: /\.css$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                  },
                },
              },
            ],
          },
          // Replaces any existing Sass rules with given rules
          {
            test: /\.s[ac]ss$/i,
            use: [
              'style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                options: { implementation: require.resolve('sass') },
              },
            ],
          },
        ],
      },
    },
    ...

Create a reproduction

No response

[mikematos84]

I just had the same issue and figured out how to fix it. In your Sass rules section you need to update the css-loader options to reflect the same as your css-loader rules

{
      name: '@storybook/addon-styling-webpack',
      options: {
        rules: [
          // Replaces existing CSS rules to support CSS Modules
          {
            test: /\.css$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                  },
                },
              },
            ],
          },
          // Replaces any existing Sass rules with given rules
          {
            test: /\.s[ac]ss$/i,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]--[hash:base64:5]',
                  },
                },
              },
              {
                loader: 'sass-loader',
                options: { implementation: require.resolve('sass') },
              },
            ],
          },
        ],
      },
    },