scss module is not working[Bug]

[qkreltms]

Describe the bug

I've tried to use scss so followed instruction to use @storybook/preset-scss on documentation and importing scss is working

import React from "react"
// this is working
import "./Button.scss"


const Button = () => (
  <button type="button" className={"simpleButton"}>test2</button>
    )

export default Button

but scss module is not working.

import React from "react"
// This is not working
import styles from "./Button.module.scss"

const Button = () => (
   // styles.simpleButton is undefined
  <button type="button" className={styles.simpleButton}>test2</button>
    )

export default Button

Steps to reproduce the behavior

I implemented an example https://github.com/qkreltms/lerna-test1 (webpack branch)

clone my project and type yarn install to install all packages
and type yarn storybook

Expected behavior

Should scss module is working (in the example button's background must be set pink)

Screenshots and/or logs

Environment

• OS: [win10]
• Node.js version: [v14.15.3]
• NPM version: [6.14.11]
• Yarn version [1.16.0]
• Browser (if applicable): [chrome]

[earthtosid]

Here's my main.js file configuration that works with scss modules

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: "@storybook/preset-scss",
      options: {
        cssLoaderOptions: {
          modules: {
            auto: true,
          },
        },
      },
    },
  ],
};

[qkreltms]

I've tried auto, but failed.

[shenzhongkang]

I have the same problem with [email protected] and webpack@5.

[dottodot]

Same problem on [email protected] and webpack@5

[dottodot]

Actual have it working on another project the only difference being that is webpack@4

[s-o-l-b]

I ran into this issue on a Vue 3 project and this seems to be working for me:

// .storybook/main.js

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss",
  ],
  framework: "@storybook/vue3",
  typescript: {
    check: false,
    checkOptions: {},
  },
  webpackFinal: async (config, {
    configType
  }) => {
    config.module.rules.forEach(rule => {
      if (rule.test.test(".scss")) {
        rule.use.forEach(use => {
          if (use.loader.includes("css-loader")) {
            use.options = {
              modules: true,
            };
          }
        });
      }
    });
    return config;
  },
};