樣式和 CSS
在 Web 應用程式中包含 CSS 有許多方法，對應地，在 Storybook 中包含 CSS 也有許多方法。通常，最好嘗試在 Storybook 的設定中複製應用程式使用樣式的方式。
CSS
Storybook 支援以幾種不同的方式匯入 CSS 檔案。Storybook 會將這些標籤注入到渲染元件的預覽 iframe 中，而不是 Storybook 管理 UI。匯入 CSS 的最佳方式取決於專案的設定和偏好。
匯入捆綁的 CSS (建議)
所有 Storybook 都預先設定為可識別 CSS 檔案的匯入。若要為所有 Stories 新增全域 CSS，請在 .storybook/preview.ts 中匯入。這些檔案將會受到 HMR 的影響，因此您可以查看變更，而無需重新啟動 Storybook 伺服器。
// 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 檔案，這也會運作。但是，如果您使用 Sass 或 Postcss 等 CSS 處理器工具，您可能需要更多設定。
包含靜態 CSS
如果您有一個想要包含在所有 Stories 中的全域 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" />CSS 模組
Vite
Vite 預設支援 CSS 模組。如果您在 vite.config.js 中自訂了 CSS 模組設定，這也會自動套用至您的 Storybook。深入瞭解 Vite 的 CSS 模組支援。
Webpack
@storybook/nextjs 嗎？Storybook 會重新建立您的 Next.js 設定，因此您可以在 Stories 中使用 CSS 模組，而無需額外設定。
如果您使用 Webpack 並且想要使用 CSS 模組，則需要一些額外的設定。我們建議安裝 @storybook/addon-styling-webpack 來協助您設定這些工具。