整合Less與 Storybook 整合
Less 是一個流行的 CSS 預處理器，可協助您編寫更小、可重複使用的樣式。
先決條件
本食譜假設您有一個使用 Less 的應用程式，並且已依照入門指南設定 Storybook >= 7.0。還沒設定嗎？請執行
# Add Storybook:
npm create storybook@latest1. 設定您的 Storybook 建構器
開始之前
如果您使用 Vite 作為您的 Storybook 建構器，您可以跳到下一步。
首先，安裝 @storybook/addon-styling-webpack 附加元件。
執行以下指令碼來安裝並註冊附加元件
npx storybook@latest add @storybook/addon-styling-webpack這將執行一個設定指令碼，引導您完成附加元件的設定。當出現提示時，從設定選項中選取 Less。
設定指令碼失敗了嗎？
實際上，此命令會執行 npx @storybook/auto-config styling，它負責讀取您的專案並嘗試為您所需的工具設定 Storybook Webpack。如果直接執行該命令無法解決您的問題，請考慮在 @storybook/auto-config 儲存庫上提交錯誤報告，以便我們進一步改進它。關於 Less 的手動設定說明，您可以參考此處的文件。
2. 匯入全域樣式
如果您有任何想要為您的 stories 公開的全域樣式，您現在可以將它們匯入到您的 preview.js 檔案中
// .storybook/preview.js
import '../src/index.less';參與貢獻
現在您已準備好將 Less 與 Storybook 一起使用。🎉 如果您在工作中使用 Less，我們很樂意收到您關於 Less + Storybook 體驗的回饋。
加入維護者和我們蓬勃發展的社群 Discord。
標籤
貢獻者
- ShaunEvening
