样式和 CSS

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

¥There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration.

CSS

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

¥Storybook supports importing CSS files in a few different ways. Storybook will inject these tags into the preview iframe where your components render, not the Storybook Manager UI. The best way to import CSS depends on your project's configuration and your preferences.

导入打包的 CSS（推荐）

¥Import bundled CSS (Recommended)

所有 Storybook 都已预先配置为识别 CSS 文件的导入。要为所有故事添加全局 CSS，请将其导入 .storybook/preview.ts。这些文件将受 HMR 约束，因此你无需重新启动 Storybook 服务器即可查看更改。

¥All Storybooks are pre-configured to recognize imports for CSS files. To add global CSS for all your stories, import it in .storybook/preview.ts. These files will be subject to HMR, so you can see your changes without restarting your Storybook server.

// 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 处理器工具，则可能需要更多配置。

¥If your component files import their CSS files, this will work too. However, if you're using CSS processor tools like Sass or Postcss, you may need some more configuration.

包含静态 CSS

¥Include static CSS

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

¥If you have a global CSS file that you want to include in all your stories, you can import it in .storybook/preview-head.html. However, these files will not be subject to HMR, so you'll need to restart your Storybook server to see your changes.

{/* .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 模块

¥CSS modules

Vite

Vite 开箱即用，提供 CSS 模块支持。如果你在 vite.config.js 中自定义了 CSS 模块配置，这也将自动应用于你的 Storybook。阅读有关 Vite 的 CSS 模块支持 的更多信息。

¥Vite comes with CSS modules support out-of-the-box. If you have customized the CSS modules configuration in your vite.config.js this will automatically be applied to your Storybook as well. Read more about Vite's CSS modules support.

Webpack

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

¥If you're using Webpack and want to use CSS modules, you'll need some extra configuration. We recommend installing @storybook/addon-styling-webpack to help you configure these tools.

PostCSS

Vite

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

¥Vite comes with PostCSS support out-of-the-box. If you have customized the PostCSS configuration in your vite.config.js this will automatically be applied to your Storybook as well. Read more about Vite's PostCSS support.

Webpack

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

¥If you're using Webpack and want to use PostCSS, you'll need some extra configuration. We recommend installing @storybook/addon-styling-webpack to help you configure these tools.

CSS 预处理器

¥CSS pre-processors

Vite

Vite 开箱即用，提供 Sass、Less 和 Stylus 支持。阅读有关 Vite 的 CSS 预处理器支持 的更多信息。

¥Vite comes with Sass, Less, and Stylus support out-of-the-box. Read more about Vite's CSS Pre-processor support.

Webpack

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

¥If you're using Webpack and want to use Sass or less, you'll need some extra configuration. We recommend installing @storybook/addon-styling-webpack to help you configure these tools. Or if you'd prefer, you can customize Storybook's webpack configuration yourself to include the appropriate loader(s).

CSS-in-JS

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

¥CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with @storybook/addon-themes's withThemeFromJSXProvider decorator.

添加 webfonts

¥Adding webfonts

.storybook/preview-head.html

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

¥If you need webfonts to be available, you may need to add some code to the .storybook/preview-head.html file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the static file location.

.storybook/preview.ts

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

¥If you're using something like fontsource for your fonts, you can import the needed css files in your .storybook/preview.ts file.