整合Bootstrap與 Storybook 整合

Bootstrap 是一個功能強大、可擴展且功能豐富的前端工具套件。

先決條件

此食譜假設您正在使用 Storybook >= 7.0，並使用入門指南。還沒有嗎？那就執行

# Add Storybook:
npm create storybook@latest

1. 導入 `Bootstrap`

將 Bootstrap 檔案導入到您的 .storybook/preview.js 檔案中。

// .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 陣列。

然後，為了讓您的 stories 能夠一鍵切換這些模式，請使用我們的 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 一起使用。 🎉 查看範例 repo以快速開始。

如果您在工作中使用 Bootstrap，我們很樂意收到您對 Bootstrap + Storybook 體驗的回饋。加入 Discord 中的維護者以參與貢獻，或查閱附加元件文件。

標籤

貢獻者

ShaunEvening

整合Bootstrap與 Storybook 整合

1. 導入 Bootstrap

2. 新增主題切換器

參與貢獻

1. 導入 `Bootstrap`