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

Posted 2023-02-22

【中文标题】Storybook 5 Sass-loader 生成空模块类名

【英文标题】：Storybook 5 Sass-loader generate empty module classname

【发布时间】：2021-09-12 06:26:57

【问题描述】：

我最近升级了 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;
  ,

所以当我开始 storybook 时，这个例子根本没有 className：

而.index 类并没有像在模块中那样被 sass 编译：

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

【参考方案1】：

对于 Storybook，您可以使用 Storybook Saas 插件，它工作得很好。