整合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 陣列。

然後，若要讓您的 Story 能夠按一下就切換這些模式，請使用我們的 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`