样式和 CSS

在 Web 应用程序中引入 CSS 有多种方法，同样地，在 Storybook 中引入 CSS 也有多种方法。通常情况下，最好尝试在 Storybook 的配置中复现你的应用程序处理样式的方式。

CSS

Storybook 支持通过几种不同的方式导入 CSS 文件。Storybook 会将这些标签注入到渲染你的组件的预览 iframe 中，而不是 Storybook 管理界面。导入 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.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" />