样式和 CSS

在 Web 应用程序中包含 CSS 的方法有很多，相应地，在 Storybook 中包含 CSS 的方法也有很多。通常，最好尝试在 Storybook 的配置中复制应用程序在样式方面所做的事情。

CSS

Storybook 支持以几种不同的方式导入 CSS 文件。Storybook 会将这些标签注入到渲染组件的预览 iframe 中，而不是 Storybook 管理器 UI 中。导入 CSS 的最佳方式取决于你的项目配置和你的偏好。

导入捆绑的 CSS（推荐）

所有 Storybook 都预先配置为识别 CSS 文件的导入。要为所有 story 添加全局 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 文件，这也将有效。但是，如果你正在使用 CSS 处理器工具（如 Sass 或 Postcss），你可能需要更多配置。

包含静态 CSS

如果你有一个想要包含在你所有 story 中的全局 CSS 文件，你可以在.storybook/preview-head.html中导入它。但是，这些文件将不受 HMR 约束，因此你需要重启 Storybook 服务器才能看到你的更改。

<!-- 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

如果你正在使用 Webpack 并且想要使用 CSS 模块，你将需要一些额外的配置。我们建议安装 @storybook/addon-styling-webpack 以帮助你配置这些工具。

PostCSS

Vite

Vite 开箱即用地支持 PostCSS。如果你在你的 vite.config.js 中自定义了 PostCSS 配置，这将自动应用于你的 Storybook。阅读更多关于 Vite 的 PostCSS 支持。

Webpack

如果你正在使用 Webpack 并且想要使用 PostCSS，你将需要一些额外的配置。我们建议安装 @storybook/addon-styling-webpack 以帮助你配置这些工具。

CSS 预处理器

Vite

Vite 开箱即用地支持 Sass、Less 和 Stylus。阅读更多关于 Vite 的 CSS 预处理器支持。

Webpack

如果你正在使用 Webpack 并且想要使用 Sass 或 less，你将需要一些额外的配置。我们建议安装 @storybook/addon-styling-webpack 以帮助你配置这些工具。或者，如果你愿意，你可以自己自定义 Storybook 的 webpack 配置以包含适当的加载器。

CSS-in-JS

CSS-in-JS 库旨在使用基本的 JavaScript，它们通常在 Storybook 中无需任何额外的配置即可工作。某些库期望组件在特定的渲染“上下文”中渲染（例如，提供主题），这可以使用 @storybook/addon-themes 的 withThemeFromJSXProvider 装饰器来实现。

添加 Webfonts

.storybook/preview-head.html

如果你需要 Webfonts 可用，你可能需要在 .storybook/preview-head.html 文件中添加一些代码。我们建议尽可能将任何资源包含在你的 Storybook 中，在这种情况下，你可能想要配置静态文件位置。

.storybook/preview.ts

如果你正在为你的字体使用类似 fontsource 的东西，你可以在你的 .storybook/preview.ts 文件中导入所需的 css 文件。