样式和 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-vite, nextjs, vue3-vite, etc.
import type { Preview } from '@storybook/your-framework';
 
import '../src/styles/global.css';
 
const preview: Preview = {
  parameters: {},
};
 
export default preview;

如果您的组件文件导入了它们的 CSS 文件，这也会起作用。但是，如果您使用 Sass 或 Postcss 等 CSS 处理器工具，您可能需要更多配置。

包含静态 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.ac.cn" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.ac.cn/css2?family=Inter:wght@100..900&display=swap"
  rel="stylesheet"
/>
<!-- Load your CSS file -->
<link rel="stylesheet" href="path/to/your/styles.css" />