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

Posted 2023-02-19

【中文标题】如何让 Storybook 使用项目的 CSS 变量

【英文标题】：How to get Storybook to use a project's CSS variables

【发布时间】：2022-01-06 00:01:31

【问题描述】：

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

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

【参考方案1】：

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

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

// ... rest of the settings

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

【讨论】：

Durn 它是我单独发现的，并打算提出我自己的答案，以便获得积分！但是你已经知道了@crazko，谢谢你的帮助！