整合Vanilla Extract與 Storybook 整合

在 TypeScript 中取得零執行時樣式表。

先決條件

本指南假設您已在使用 Vanilla-extract 的應用程式中，並且已使用入門指南設定好 Storybook >= 7.0。還沒有嗎？請按照 Vanilla-extract 的設定說明操作，然後執行

# Add Storybook:
npx storybook@latest init

設定您的 Storybook 建構器

如果您已在專案中使用 Vanilla Extract，您可能已經安裝了這些相依性。

首先，安裝所需的相依性

# For Vite users
yarn add -D @vanilla-extract/vite-plugin
 
# For Webpack users
yarn add -D @vanilla-extract/webpack-plugin mini-css-extract-plugin

Vite

對於 Vite 使用者，Storybook 使用您專案的 vite.config.js 進行建置設定。這表示如果您的專案使用 Vanilla Extract，它也已經為您的 Storybook 設定好了。🎉

您可以在 Stackblitz 上查看完整範例。

Webpack

對於 Webpack 使用者，@storybook/addon-styling-webpack 可以讓您的 Storybook 只需幾行程式碼即可使用 Vanilla Extract 執行。

執行以下腳本來安裝和註冊擴充功能

npx storybook@latest add @storybook/addon-styling-webpack

這將執行一個設定腳本，引導您設定擴充功能。如果出現提示，請選擇 Vanilla Extract 作為您的 CSS 處理器。

設定腳本失敗了嗎？

在底層，此命令會執行 npx @storybook/auto-config styling，它負責讀取您的專案並嘗試為您所需的工具設定您的 Storybook Webpack。如果直接執行該命令無法解決您的問題，請考慮在 @storybook/auto-config 儲存庫上提交錯誤報告，以便我們進一步改進它。如需 Less 的手動設定說明，您可以參考文件。

手動設定 Webpack

如需手動設定的範例，您可以在 Stackblitz 上查看完整範例。

參與其中

現在您可以使用 Vanilla Extract 與 Storybook 了。🎉 如果您在工作中使用 Vanilla Extract，我們很樂意收到您對 Vanilla Extract + Storybook 體驗的回饋。

加入維護人員和我們在 Discord 中蓬勃發展的社群。

標籤

貢獻者

ShaunEvening