本頁目錄
保留 Angular 的建置器，並使用 Master CSS CLI 產生它可載入的樣式表。開發時，請同時執行兩個監看程序：Master CSS 更新產生的 CSS，而 Angular 提供匯入該 CSS 的應用程式。
本設定假設你已有在瀏覽器渲染的 Angular 應用程式，包含全域 src/styles.css、可正常執行的 npm start 指令，以及受支援的 Node.js 24 版本。它使用 Angular 預設的模擬封裝，讓全域樣式能作用於元件範本。Shadow DOM 元件則需要將樣式放入自己的 shadow root。
#安裝
#檢查樣式表連接
安裝程式會在專案根目錄建立 Master CSS 原始碼進入點：
@import '@master/css';它也會在保留既有內容的前提下，將以下匯入加入 Angular 的全域樣式表：
@import './master.generated.css';在
angular.json中，請將src/styles.css保留在應用程式的build.options.styles陣列內。Angular 的全域樣式設定決定產生的 CSS 是否能傳到頁面。若工作區版面配置非標準結構，請一併調整輸出路徑與匯入。將
@theme、@utility等 Master CSS 定義放在master.css。Angular 使用的是產生後的原生 CSS；一般 CSS 建置器不會編譯這些定義。請勿編輯src/master.generated.css，或將它匯入回master.css。#產生 CSS
在一個終端機產生樣式表，並持續監看變更：
npx master-css generate --output src/master.generated.css --watch等待首次產生完成，再於第二個終端機啟動 Angular：
npm start請讓兩個程序持續執行。新增類別時，只有 Angular 的監看程序不會重新產生 Master CSS。
#開始使用 Master CSS
將以下標記加入根元件所參照的範本。依 Angular 目前的命名慣例，通常是
src/app/app.html；既有專案可能使用src/app/app.component.html。檢查範本樣式
<p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">Hello Angular</p>產生的 CSS
@layer theme { :root, :host { --color-zinc-90: oklch(24.6% .0022 265); --color-zinc-100: oklch(15% .0016 265) } :root, :host { --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90)); --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12)); --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white)) } :root, :host { --color-white: oklch(100% 0 none) } :root, :host { --font-weight-regular: 400; --font-size-sm: .875rem; --text-sm: var(--font-size-sm); --text-sm--line-height: 1.5; --text-sm--letter-spacing: 0; --radius-md: .375rem; --spacing-md: 1rem }}@layer utilities { .text-sm { font-size: var(--text-sm); line-height: var(--text-sm--line-height, normal); letter-spacing: var(--text-sm--letter-spacing, normal) } .bg-surface-raised { background-color: var(--color-surface-raised) } .b-line-divider { border-color: var(--color-line-divider) } .r-md { border-radius: var(--radius-md) } .b-solid { border-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .fg-text-strong { color: var(--color-text-strong) } .font-regular { font-weight: var(--font-weight-regular) } .m\(0\) { margin: calc(0 * 1px) } .p-md { padding: var(--spacing-md) } .w-fit { width: fit-content }}段落具有中性色表面、細邊框、小圓角，以及四邊各 1rem 的內距。
#驗證結果
開啟 Angular 應用程式。段落的間距與表面應符合範例。將範本中的 p-md 改成 p-lg：兩個監看程序都在執行時，內距應從 1rem 增加為 1.5rem。確認更新後改回原值。
若未出現樣式，請依序追查連接：
- 檢查 Master CSS 終端機是否有產生錯誤，並確認
src/master.generated.css存在。 - 檢查
src/styles.css中的匯入，以及該檔案在angular.json中的註冊。 - 在瀏覽器開發者工具中檢查段落，尋找相符的規則，以及是否有元件樣式覆寫它。
靜態產生需要原始碼中的完整類別字串，或明確的安全清單。條件式類別名稱也要保持完整；動態值請使用 CSS 自訂屬性。若產生的輸出缺少類別，請參閱掃描類別名稱。
#建置以部署
先產生 CSS，再由 Angular 打包應用程式：
npx master-css generate --output src/master.generated.cssnpm run buildCI 也使用相同順序。提供舊的產生檔案，可能掩蓋樣式缺少的問題，因此請在重新產生後檢查正式環境建置。
靜態描述的是 CSS 產生步驟。在瀏覽器渲染的 Angular 應用程式，仍需要 JavaScript 才能建立 HTML。
#選擇其他渲染模式
預設使用靜態渲染。若需要依瀏覽器 DOM 變更產生類別，而非依已知的原始碼字串產生，請使用執行階段渲染。
| 模式 | 安裝程式選項 | CSS 傳遞方式 |
|---|---|---|
| 靜態 | 無 | 由 src/styles.css 匯入 CLI 輸出 |
| 執行階段 | --mode runtime | 從 src/main.ts 啟動瀏覽器執行階段 |
在瀏覽器產生新類別
執行階段設定請執行：
npm create @master/css@2.0.0 -- --framework angular --mode runtime --yes安裝程式會從 src/main.ts 啟動 MasterCSSRuntime、載入 @master/css-runtime/default-program，並觀察文件中的類別變更。
**啟動 Angular 前，請先完成全域樣式表設定。**安裝程式目前會將 @import '@master/css'; 加入 src/styles.css。請以下方原生基礎樣式表取代該匯入，保留應用程式需要的其他原生 CSS 匯入與規則。若從靜態設定切換，也請移除 ./master.generated.css 匯入；這條執行階段路徑不需要 CSS 監看程序。
@import '@master/css/base.css';預設程式提供預設集的詞彙。在 Angular 的一般 CSS 中加入 @theme 或 @utility，不會編譯出自訂的執行階段程式。若要使用專案自訂詞彙，請採用靜態 CLI 路徑，或透過執行階段 API提供另外編譯的程式。
建置並提供 Angular 應用程式，再於瀏覽器主控台執行以下程式碼。無須重新建置，範例段落就應出現底線：
document.querySelector('#master-check').classList.add('underline')此執行階段從瀏覽器進入點啟動。Angular SSR 應用程式需要另外規劃初始 CSS 策略；本指南涵蓋的是瀏覽器渲染設定。