85,947
返回整合
sass

整合Sass與 Storybook

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

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

# Add Storybook:
npm create storybook@latest

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. 導入全域樣式

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

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

2.1. Angular

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

// 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