参加在线直播:美国东部时间周四上午 11 点,Storybook 9 发布及 AMA
文档
Storybook Docs

样式和 CSS

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

CSS

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

CSS modules

Vite

Vite 内置支持 CSS modules。如果你在 vite.config.js 中自定义了 CSS modules 配置,它也将自动应用于你的 Storybook。阅读更多关于 Vite 对 CSS modules 的支持

Webpack

正在使用 @storybook/nextjs

Storybook 会重新创建你的 Next.js 配置,因此你可以在 Stories 中使用 CSS modules,无需额外配置。

如果你正在使用 Webpack 并希望使用 CSS modules,则需要一些额外配置。我们建议安装 @storybook/addon-styling-webpack 来帮助你配置这些工具。

PostCSS

Vite

Vite 内置支持 PostCSS。如果你在 vite.config.js 中自定义了 PostCSS 配置,它也将自动应用于你的 Storybook。阅读更多关于 Vite 对 PostCSS 的支持

Webpack

正在使用 @storybook/nextjs

Storybook 会重新创建你的 Next.js 配置,因此你可以在 Stories 中使用 PostCSS,无需额外配置。

如果你正在使用 Webpack 并希望使用 PostCSS,则需要一些额外配置。我们建议安装 @storybook/addon-styling-webpack 来帮助你配置这些工具。

CSS 预处理器

Vite

Vite 内置支持 Sass, Less 和 Stylus。阅读更多关于 Vite 对 CSS 预处理器的支持

Webpack

正在使用 @storybook/nextjs

Storybook 会重新创建你的 Next.js 配置,因此你可以在 Stories 中使用 Sass,无需额外配置。

如果你正在使用 Webpack 并希望使用 Sass 或 Less,则需要一些额外配置。我们建议安装 @storybook/addon-styling-webpack 来帮助你配置这些工具。或者,如果你愿意,可以自行定制 Storybook 的 Webpack 配置,以包含适当的加载器。

CSS-in-JS

CSS-in-JS 库旨在使用基础 JavaScript,它们通常在 Storybook 中无需额外配置即可工作。一些库期望组件在特定的渲染“上下文”中渲染(例如,提供主题),这可以通过 @storybook/addon-themeswithThemeFromJSXProvider 装饰器来实现。

添加 Web 字体

.storybook/preview-head.html

如果需要 Web 字体可用,可能需要在 .storybook/preview-head.html 文件中添加一些代码。如果可能,我们建议将所有资源文件与 Storybook 一起包含,在这种情况下,你可能需要配置静态文件位置

.storybook/preview.ts

如果你使用像 fontsource 这样的工具管理字体,可以在 .storybook/preview.ts 文件中导入所需的 CSS 文件。