如何在Storybook调色板和组件中同时使用相同的颜色变量？

Question

我创建了一个UI组件库，并使用Storybook为其提供文档和示例。

我的目标是在SCSS文件中声明一个颜色调色板，并在组件和storybook调色板中使用它。

Storybook调色板是一个内置的storybook组件，可以为您的颜色调色板创建文档。

因此，我期望如果设计系统的颜色发生变化，我只需更改SCSS变量值，颜色调色板和组件都将使用新的颜色值进行更新。

不幸的是，storybook文档在这一部分很差，示例只包含硬编码的颜色。颜色调色板页面是MDX文件，所以我不知道如何在那里导入和使用SCSS变量。

有办法实现我的目标吗？

Answer 1

今晚在查找我遇到的相同问题时遇到了这个。经过一些谷歌搜索，我也找到了这个：https://dev.to/benrobertson/color-swatches-in-storybook-4aa9。我还没有尝试过，但想分享给你，如果你想试一试的话。我计划在周末测试一下。