Storybook中Sass模块默认导出问题的分析与解决

在Storybook项目中使用Sass模块时，开发者可能会遇到一个常见问题：通过默认导入方式(import styles from './style.module.scss')无法获取样式对象，而必须使用命名空间导入(import * as styles from './style.module.scss')才能正常工作。本文将深入分析这一问题的原因，并提供完整的解决方案。

问题现象

当开发者配置Webpack处理Sass模块时，通常会遇到以下情况：

1. 使用默认导入时，styles变量为undefined
2. 必须改用命名空间导入才能获取样式类名映射
3. 相比之下，CSS模块(.module.css)却能正常工作

根本原因

这个问题源于Webpack和css-loader对Sass模块的处理方式。在默认配置下，css-loader不会自动为Sass模块创建默认导出，而是只生成命名空间导出。这与CSS模块的处理行为不一致。

解决方案

要解决这个问题，我们需要修改Webpack配置，确保css-loader正确处理Sass模块的默认导出。以下是完整的配置方案：

// webpack.config.js 或 storybook的webpackFinal配置
{
  test: /\.module\.scss$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          auto: true,
          localIdentName: '[name]__[local]___[hash:base64:5]',
          exportOnlyLocals: false, // 确保生成完整的模块导出
          namedExport: false, // 禁用命名导出，启用默认导出
        },
      },
    },
    {
      loader: 'sass-loader',
      options: {
        implementation: require('sass'),
      },
    },
  ],
}

关键配置项说明：

1. exportOnlyLocals: false - 确保css-loader不仅生成局部类名，还保留完整的模块导出
2. namedExport: false - 禁用命名导出，启用默认导出功能

替代方案

如果上述配置仍不生效，可以考虑使用专门为Storybook设计的CSS模块预设，它已经内置了对各种CSS预处理器的支持，包括Sass和Less。

最佳实践建议

1. 保持CSS模块和Sass模块的导入方式一致，提高代码一致性
2. 在团队项目中明确文档化模块导入规范
3. 考虑使用TypeScript类型定义增强开发体验
4. 定期检查依赖版本，确保css-loader和sass-loader的兼容性

总结

通过正确配置Webpack的css-loader，开发者可以解决Sass模块默认导出失效的问题，使项目中的样式模块导入方式保持统一。这个问题虽然看似简单，但涉及到Webpack模块系统的工作原理，理解其背后的机制有助于开发者更好地处理类似的前端工程化问题。