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

问题背景

在使用Storybook构建项目时，开发者经常会遇到样式管理的问题。特别是当使用Sass预处理器结合CSS Modules时，一个常见的问题是：通过import styles from './style.module.scss'导入样式时，styles变量会变成undefined，而必须使用import * as styles from './style.module.scss'才能正确获取样式类名。

问题现象

在Storybook项目中配置了Sass支持后，开发者发现：

1. 常规的.scss文件导入工作正常
2. 使用CSS Modules的.module.scss文件时，默认导出失效
3. 必须使用命名空间导入(import * as styles)才能访问样式类名
4. 相比之下，.module.css文件却能正常工作，无需特殊处理

技术分析

这个问题本质上与Webpack的模块处理机制有关。当使用Sass-loader处理Sass文件时，默认情况下不会自动将CSS Modules的导出结果设置为模块的默认导出。

在Webpack配置中，虽然正确设置了css-loader的modules选项启用了CSS Modules功能，但Sass文件的导出行为与CSS文件有所不同。CSS-loader对.css文件有特殊处理，会自动将模块导出设置为默认导出，而Sass-loader则没有这个默认行为。

解决方案

要解决这个问题，我们需要修改Webpack配置，确保Sass模块也能像CSS模块一样正确导出。以下是几种可行的解决方案：

方案一：修改Webpack配置

在Storybook的Webpack配置中添加esModule选项：

{
  loader: 'css-loader',
  options: {
    modules: {
      auto: true,
      localIdentName: '[name]__[local]___[hash:base64:5]',
    },
    esModule: false, // 关键配置
  },
}

这个配置告诉css-loader不要使用ES模块导出格式，从而保持CommonJS的导出行为，使得默认导出可用。

方案二：使用专用预设

对于Storybook项目，可以使用专门针对CSS Modules的预设配置。这个预设会自动处理好各种预处理器的模块导出问题，包括Sass和Less。

方案三：调整导入方式

虽然这不是根本解决方案，但在某些情况下，简单地调整导入方式可能是最快的临时解决方案：

// 替代默认导入
import * as styles from './style.module.scss';

最佳实践建议

1. 对于新项目，建议使用方案二的预设方法，可以一劳永逸地解决问题
2. 对于已有项目，如果改动不大，可以采用方案一的配置修改
3. 保持项目中的样式导入方式一致，要么全部使用命名空间导入，要么全部使用默认导入
4. 在团队中明确约定样式导入规范，避免混用不同方式导致混淆

总结

Storybook项目中Sass模块的默认导出问题是一个常见的配置问题，理解其背后的原理有助于开发者更好地处理类似情况。通过适当的Webpack配置调整或使用专用工具，可以轻松解决这个问题，使开发体验更加流畅。