[Bug]: Sass module doesn't expose the styles in the default function

[retrofox]

Describe the bug

I'm not able to import the styles default module when using .scss

This is my webpack config:

{
  test: /\.module\.scss$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          auto: true,
          localIdentName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
    {
      loader: 'sass-loader',
      options: {
        implementation: require( 'sass' ),
      },
    },
  ],
},

so when I import the default module:

import styles from './style.module.scss';

... styles is undefined.

However, it's possible to reach it by importing all modules:

import * as styles from './style.module.scss';

Now, styles is defined and contains all classes IDs:

---

On the other hand, when using simply css files, it works as expected, without any specific settings:

import styles from './style.module.css';

How can I export the module straight in the default export using scss?

Reproduction link

https://stackblitz.com/edit/github-x7muknfl?file=.storybook%2Fmain.ts,package.json&preset=node

Reproduction steps

1. configure storybook to use SASS, regular a CSS modules:

in the main.js file:

	webpackFinal: async ( config ) => {
		config.module.rules.push( {
			test: /\.scss$/,
			oneOf: [
				{
					test: /\.module\.scss$/,
					use: [
						'style-loader',
						{
							loader: 'css-loader',
							options: {
								modules: {
									auto: true,
									localIdentName: '[name]__[local]___[hash:base64:5]',
								},
							},
						},
						{
							loader: 'sass-loader',
							options: {
								implementation: require( 'sass' ),
							},
						},
					],
				},

				{
					use: [
						'style-loader',
						'css-loader',
						{
							loader: 'sass-loader',
							options: {
								implementation: require( 'sass' ),
							},
						},
					],
				},
			],
		} );
		return config;
	},

2. Confirm it handles correctly regular style.scss file
3. Confirm it doesn't expose the classes in the default style:

import styles from './style.module.scss';

console.log( { styles } ); // `styles` is undefined

4. Confirm it's possible to access to the classes by importing all modules:

import * as styles from './style.module.scss';

console.log( { styles } ); // now `styles` contains class IDs

System

Storybook Environment Info:

  System:
    OS: macOS 15.1.1
    CPU: (16) arm64 Apple M4 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.3.0 - ~/.nvm/versions/node/v18.3.0/bin/node
    npm: 8.11.0 - ~/.nvm/versions/node/v18.3.0/bin/npm <----- active
  Browsers:
    Chrome: 131.0.6778.109
    Safari: 18.1.1
  npmPackages:
    @storybook/addon-essentials: ^8.4.7 => 8.4.7
    @storybook/addon-interactions: ^8.4.7 => 8.4.7
    @storybook/addon-onboarding: ^8.4.7 => 8.4.7
    @storybook/addon-webpack5-compiler-swc: ^1.0.5 => 1.0.5
    @storybook/blocks: ^8.4.7 => 8.4.7
    @storybook/react: ^8.4.7 => 8.4.7
    @storybook/react-webpack5: ^8.4.7 => 8.4.7
    @storybook/test: ^8.4.7 => 8.4.7
    eslint-plugin-storybook: ^0.11.1 => 0.11.1
    storybook: ^8.4.7 => 8.4.7

Additional context

No response

[hanwenbo]

LESS also has this bug

[hanwenbo]

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

this will solve your problem