Storybook 5 Sass-loader 生成空模块类名

Question

我最近升级了 tom Next.js 11，所以我也使用故事书 webpack5 beta。但是当我将 sass-loader 添加到配置时：

// .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;
  },
}

所以当我启动故事书时，示例根本没有 class名称：

并且 .index class 没有像在模块中那样由 sass 编译：

要亲自查看，您可以查看我的示例 here

Answer 1

对于 Storybook，您可以使用 Storybook Saas Addon，效果很好。

Storybook 5 Sass-loader 生成空模块类名

Storybook 5 Sass-loader generate empty module classname

sass

storybook

sass-loader

webpack-5