集成Bootstrap与 Storybook 一起使用

Bootstrap 是一个功能强大、可扩展且功能丰富的前端工具包。

先决条件

此食谱假设您使用的是 Storybook >=7.0，并使用入门指南。没有？然后运行

# Add Storybook:
npx storybook@latest init

1. 导入 `Bootstrap`

在您的 .storybook/preview.js 文件中导入 Bootstrap 文件。

// .storybook/preview.js
 
import 'bootstrap/dist/css/bootstrap.min.css';
 
// Only import this if you want to use Bootstrap's
// JQuery helpers
import 'bootstrap/dist/js/bootstrap.bundle';
 
export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    expanded: true,
    hideNoControlsWarning: true,
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

使用 Sass？

查看我们的 Sass 食谱以获取有关如何配置 Storybook 以与 Sass 一起工作的说明。

在幕后，这运行 npx @storybook/auto-config themes ，它应该读取您的项目并尝试使用正确的装饰器配置您的 Storybook。如果直接运行该命令无法解决您的问题，请在 @storybook/auto-config 存储库中提交错误，以便我们能够尽可能地解决它。要手动添加此插件，请安装它，然后将其添加到 .storybook/main.ts 中的 addons 数组中。

然后，要让您的故事在单击时能够在这些模式之间切换，请使用我们的 withThemeByDataAttribute 装饰器，将以下代码添加到您的 .storybook/preview.js 文件中。

// .storybook/preview.js
 
import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
// snipped for brevity
 
export const decorators = [
  withThemeByDataAttribute({
    themes: {
      light: 'light',
      dark: 'dark',
    },
    defaultTheme: 'light',
    attributeName: 'data-bs-theme',
  }),
];

参与进来

现在您已准备好使用 Bootstrap 与 Storybook 一起使用。🎉 查看示例仓库以快速入门。

如果您在工作中使用 Bootstrap，我们很乐意听取您对 Bootstrap + Storybook 体验的反馈意见。加入维护人员在 Discord 上的讨论，参与进来，或者加入插件文档。

标签

贡献者

ShaunEvening

集成Bootstrap与 Storybook 一起使用

1. 导入 Bootstrap

2. 添加主题切换器

参与进来

1. 导入 `Bootstrap`