Storybook 5 Sass-loader generate empty module classname

Question

I recently upgraded tom Next.js 11 and so I use the storybook webpack5 beta as well. But when I add the sass-loader to the config:

// .storybook/main.js


const path = require('path');

module.exports = {
  core: {
    builder: "webpack5",
  },
  stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config, { configType }) => {
    
    config.module.rules.push({
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
        ],
      },);

    return config;
  },
}

So when I start storybook then, the example has no className at all:

And the .index class has not compiled by sass like it should in a module:

To see it yourself you can checkout my example here

Answer 1

For Storybook you can use the Storybook Saas Addon which works just fine.