整合Vanilla Extract與 Storybook 整合

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

先決條件

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

# Add Storybook:
npm create storybook@latest

設定您的 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