Storybook 8.1.4中style-loader无法识别CSS模块默认导入的问题

问题诊断 #

你遇到的TypeError: Cannot read properties of undefined (reading 'headerContainer')错误，根源在于css-loader v7.x 默认不再为CSS模块生成默认导出。当使用import styles from './PageHeader.module.scss'时，styles会返回undefined；而import * as styles能正常工作，是因为它获取了所有命名导出的类名集合。

解决方案 #

无需修改组件的导入语法，只需在Storybook的Webpack配置中为css-loader添加exportDefault: true配置，强制生成默认导出对象：

修改main.ts中的Webpack规则 #

const path = require('path');

module.exports = {
  // ... 其他Storybook配置项
  webpackFinal: async (config) => {
    // 移除原有SCSS规则，避免与自定义规则冲突
    config.module.rules = config.module.rules.filter(
      rule => !(rule.test instanceof RegExp && rule.test.test('.scss'))
    );

    // 专门处理CSS模块文件（.module.scss后缀）
    config.module.rules.push({
      test: /\.module\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              mode: 'local',
              localIdentName: '[path][name]__[local]_[hash:base64:5]',
              exportDefault: true, // 关键配置：开启默认导出
            },
            importLoaders: 1,
          }
        },
        'sass-loader'
      ],
      include: path.resolve(__dirname, '../'),
    });

    // 处理全局SCSS文件（非.module.scss后缀）
    config.module.rules.push({
      test: /\.scss$/,
      exclude: /\.module\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
};

配置说明 #

1. exportDefault: true：强制css-loader生成默认导出对象，包含所有CSS类名，完美兼容import styles from的原有语法。
2. 拆分规则：将CSS模块文件和全局SCSS文件分开处理，避免全局样式被错误解析为模块。
3. 移除原有规则：先过滤掉Storybook自带的SCSS规则，防止配置冲突导致异常。

验证 #

修改配置后重启Storybook，原有组件中的import styles from './PageHeader.module.scss'语句即可正常获取包含headerContainer的样式对象，无需修改任何组件代码。

内容的提问来源于stack exchange，提问作者Ruifeng Ma