如何将CSF Stories拆分到独立文件并导入Button.stories.js？

问题分析 #

你尝试将Story示例拆分到单独文件后无法显示，核心原因是导出顺序和方式导致Storybook无法正确关联元数据（默认导出的配置）与拆分的Story对象。

修正步骤 #

1. 调整 Button.stories.js #

将导出顺序调整为：先定义默认元数据，再导入并显式导出拆分的Stories，确保Storybook先识别组件配置，再加载对应的Story示例：

import { Button } from './Button';
// 显式导入拆分的Story示例
import { Primary, Secondary, Large, Small } from './Button.examples';

// 先导出默认元数据
export default {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

// 再导出各个Story示例
export { Primary, Secondary, Large, Small };

2. 简化 Button.examples.js #

示例文件中无需导入Button组件（主文件已关联component配置），保留纯Story定义即可：

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary = {
  args: {
    label: 'Button',
  },
};

export const Large = {
  args: {
    size: 'large',
    label: 'Button',
  },
};

export const Small = {
  args: {
    size: 'small',
    label: 'Button',
  },
};

验证 #

重新运行npm run storybook，即可正常显示所有拆分的Button Story示例。

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