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

Question

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

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

Answer 1

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

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

// ... rest of the settings

这样，您的故事书中的所有页面都可以使用它。