如何在Storybook調色盤和組件中同時使用相同的顏色變數？

Question

我建立了一個UI元件庫，並使用Storybook為其提供文件和範例。

我的目標是在SCSS檔案中聲明一個顏色調色板，並在元件和storybook調色板中使用它。

Storybook調色板是一個內建的storybook元件，可以為您的顏色調色板建立文件。

因此，我期望如果設計系統的顏色發生變化，我只需更改SCSS變數值，顏色調色板和組件都將使用新的顏色值進行更新。

不幸的是，storybook文件在這一部分很差，範例只包含硬編碼的顏色。顏色調色板頁面是MDX文件，所以我不知道如何在那裡導入和使用SCSS變數。

有辦法實現我的目標嗎？

Answer 1

今晚在查找我遇到的相同問題時遇到了這個。經過一些谷歌搜索，我也找到了這個：https://dev.to/benrobertson/color-swatches-in-storybook-4aa9。我還沒有嘗試過，但想分享給你，如果你想試一試的話。我計劃在周末測試一下。