样式和 CSS

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

CSS

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

导入捆绑的 CSS (推荐)

所有 Storybook 都预先配置为识别 CSS 文件的导入。要为所有故事添加全局 CSS，请在 .storybook/preview.ts 中导入它。这些文件将受 HMR 影响，因此你可以看到你的更改，而无需重启 Storybook 服务器。

.storybook/preview.ts

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

包含静态 CSS

如果你有一个全局 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:[email protected]&display=swap"
  rel="stylesheet"
/>
{/* Load your CSS file */}
<link rel="stylesheet" href="path/to/your/styles.css" />