基本概念

單一存儲庫

讓每個應用程式擁有自己的專案脈絡，並在工作區套件之間共用 CSS 詞彙。

本頁目錄

讓每個應用程式擁有獨立的專案邊界，再透過匯入共用 CSS 詞彙。語言服務、程式碼 lint 與建置整合，都能使用同一份應用程式專屬的專案脈絡。

匯入 @master/css 的專案 CSS 進入點，或宣告 Master CSS 相依性的套件，都能識別一個工作區。這些邊界獨立於套件管理工具的工作區清單。請從各應用程式的專案目錄開始建置，並將 CSS 進入點保留在該目錄。僅屬於套件管理工具的同一工作區，不會建立共用的 Master CSS 設定。

#一個專案，一個工作區

每個 package.json 專案都有一個 Master CSS 工作區：一份專案 manifest 圖、原始碼掃描脈絡，以及一組工具整合。

獨立應用程式請使用分開的套件專案，例如 projects/admin 與 projects/shop。各自擁有 CSS 進入點與應用程式設定：

projects
- admin
  - package.json
  - eslint.config.js
  - index.css
- shop
  - package.json
  - eslint.config.js
  - index.css
package.json
styles
- shared.css

在每個應用程式完成對應的框架設定。從該應用程式目錄啟動開發伺服器及正式環境建置，讓產生的 CSS、原始碼掃描、診斷與編輯器狀態都對齊同一專案根目錄。

將共用定義放在專用原始檔中。此範例由共用檔提供 token，而每個應用程式自行匯入完整的 Master CSS 進入點：

styles/shared.css

@theme {  --color-primary: #123456;}

在每個工作區匯入共用的專案 CSS 檔案，再於其後加入工作區專屬的定義。

projects/admin/index.css

@import '@master/css';@import '../../styles/shared.css';@theme {  --color-primary: #4f46e5;}@layer components {  .app-shell {    background-color: var(--color-surface-base);    min-height: 100vh;  }}

共用匯入之後的定義，可以覆寫共用 token 與 utility。同一串接層的原生元件規則，依 CSS 原始碼順序排列。

shop 匯入相同的共用原始碼，再選擇自己的顏色：

projects/shop/index.css

@import '@master/css';@import '../../styles/shared.css';@theme {  --color-primary: #0f766e;}

兩個應用程式都能使用相同類別：

<p class="flex items-center gap-xs text-sm">  <span aria-hidden="true" class="h(8) w(8) pill bg-primary"></span>  Workspace</p>

admin 建置會輸出自己的 #4f46e5 主色值；shop 則輸出 #0f766e。變更 admin 的覆寫，不應改變 shop 輸出。建置兩個應用程式，檢查各自產生樣式表中的 --color-primary，確認邊界正常運作。

共用檔案定義詞彙；每個應用程式進入點決定匯入內容。應用程式專用的掃描指令與傳遞選擇，請留在所屬應用程式中，不要放入共用樣式表。

#納入共用元件原始碼

共用 CSS 匯入提供的是定義。共用元件內的類別字串，仍需要送到使用端應用程式的掃描器。Vite 可以掃描匯入的工作區模組；從應用程式內啟動的 CLI 建置，則不會沿 JavaScript 匯入追查同層套件。

若元件位於 packages/ui，請在每個使用端應用程式的 CSS 進入點加入 @source "../../packages/ui/**/*.{js,jsx,ts,tsx}";。這個明確路徑會將共用原始碼納入應用程式建置。它相對於宣告該指令的 CSS 檔案，因此進入點移動時也要調整路徑。