樣式和 CSS

在 Web 應用程式中加入 CSS 的方式有很多種，相對應地，在 Storybook 中加入 CSS 的方式也很多種。通常，最好嘗試在 Storybook 的設定中複製應用程式的樣式。

CSS

Storybook 支援以幾種不同的方式匯入 CSS 檔案。Storybook 會將這些標籤注入到預覽 iframe 中，您的元件會在其中渲染，而不是 Storybook Manager UI。匯入 CSS 的最佳方式取決於專案的設定和您的偏好。

匯入捆綁的 CSS（推薦）

所有 Storybook 都已預先設定為識別 CSS 檔案的匯入。若要為所有 Story 新增全域 CSS，請在 .storybook/preview.ts 中匯入。這些檔案將受 HMR 約束，因此您無需重新啟動 Storybook 伺服器即可看到變更。

.storybook/preview.ts

// Replace your-framework with the framework you are using (e.g., react, vue3)
import { Preview } from '@storybook/your-framework';
 
import '../src/styles/global.css';
 
const preview: Preview = {
  parameters: {},
};
 
export default preview;

如果您的元件檔案匯入它們的 CSS 檔案，這也將有效。但是，如果您使用 CSS 處理器工具（如 Sass 或 Postcss），則可能需要更多設定。

包含靜態 CSS

如果您有想要包含在所有 Story 中的全域 CSS 檔案，則可以在 .storybook/preview-head.html 中匯入它。但是，這些檔案將不受 HMR 約束，因此您需要重新啟動 Storybook 伺服器才能看到變更。

.storybook/preview-head.html

<!-- Loads a font from a CDN -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
  rel="stylesheet"
/>
<!-- Load your CSS file -->
<link rel="stylesheet" href="path/to/your/styles.css" />