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

Question

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

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

Answer 1

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

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

// ... rest of the settings

这样，它将在您的 Storybook 的所有页面上可用。