如何让 Storybook 使用项目的 CSS 变量

How to get Storybook to use a project's CSS variables

我将 Storybook 与 React 项目一起使用,该项目也使用样式化组件。其中许多样式定义访问 src 目录根目录下 index.css 文件中 :root 中定义的 CSS 变量值。以这种方式定义的所有 CSS 变量都只是颜色的占位符。但是,当组件在 Storybook 中呈现时,不会访问 CSS 变量的值,因此这些颜色永远不会 render/display.

有没有办法通过插件或配置,使我在 index.css 文件中定义的 CSS 变量在 Storybook 中呈现时可供组件访问?

您可以在 .storybook/preview.js 文件中导入 CSS 文件:

import '../src/index.css';

// ... rest of the settings

这样,它将在您故事书中的所有页面上可用。