84,593
返回整合
sass

整合Sass與 Storybook

Sass（也稱為 scss）是一種流行的 CSS 預處理器，允許開發人員編寫更易於維護和重用的樣式表。
先決條件

此指南假設您有一個使用 Sass 的應用程式，並且已使用入門指南設定了 Storybook >=7.0。還沒有嗎？請執行

# Add Storybook:
npx storybook@latest init

1. 新增 @storybook/addon-styling-webpack

注意！

某些 Storybook 配置已預先設定為支援 Sass。如果您的專案符合以下任何條件，您可以跳到下一步。

  • Storybook >= 7.x 搭配 vite 建構器。
  • Storybook >= 7.x 搭配 @storybook/nextjs 框架。
  • Storybook >= 7.x 搭配 @storybook/preset-create-react-app 和 react-scripts@2.x.x 或更高版本。
  • Storybook >= 7.x 搭配 @storybook/angular 框架

執行以下指令碼以安裝和註冊擴充功能

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

這將執行一個設定指令碼，引導您設定擴充功能。出現提示時，請從設定選項中選擇 Sass。

設定指令碼失敗了嗎？

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

2. 匯入全域樣式

如果您有任何想要為您的故事公開的全域樣式，您現在可以將它們匯入您的 preview.js 檔案中

// .storybook/preview.js
 
import '../src/index.scss';

2.1. Angular

如果您使用 Angular，則需要將您的全域 scss 檔案新增至您的 angular.json 檔案中。這將確保您的樣式由 Angular 的 Webpack 處理，並注入到呈現您的故事的預覽 iframe 中。

// angular.json
{
 "storybook": {
    "builder": "@storybook/angular:start-storybook",
    "options": {
      "browserTarget": "my-default-project:build",
      "styles": ["src/index.scss"]
    }
  } 
}

參與其中

現在您已準備好將 Sass 與 Storybook 搭配使用。🎉 如果您在工作中使用 Sass，我們很樂意收到您對 Sass + Storybook 體驗的回饋。

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

標籤
貢獻者
  • ShaunEvening
    ShaunEvening