匯入

使用 @import 交付樣式表，並讓其中的定義可用。若本地編譯需要那些定義，但原生樣式表由其他輸出負責交付，請用 @reference。應用程式設定請依照安裝；路由個別擁有的樣式請見路由層級樣式。

兩份本地輸出都使用 bg-brand。匯入會交付原生 .card 規則，參照則只讓定義可用。本地使用的 token 仍可在任一輸出中產生。

文字說明

1. tokens.css 在 @theme 宣告 --color-brand，並定義讀取它的原生 .card 規則。兩次本地編譯唯一差異是使用 @import 或 @reference。
2. 兩份本地輸出都生成 bg-brand，並保留其 --color-brand 相依關係。
3. 只有 import 輸出包含 .card。參照不會讓該規則成為本地使用根節點，也不會發布被參照樣式表。
4. 分支比較的是編譯輸出，不是執行階段載入步驟。原生覆寫也需要實際交付樣式表。

@import "@master/css"

套件匯入是唯一的專案入口標記。它載入預設集的原生 CSS，包含穩定的串接層順序與基礎樣式，並識別接收生成 utility CSS 的樣式表。

@import "@master/css";

仍可明確使用獨立編譯器與 manifest API。manifest 本身不會載入原生 CSS；使用執行階段或伺服器渲染的應用程式，也必須交付相關原生樣式表。

本地檔案 URL

Node 檔案編譯依 CSS 跳脫與大小寫規則讀取 CSS 匯入名稱。相對 @import 與 @reference URL 的路徑以來源檔案為基準解析：百分比跳脫代表檔名字元，查詢字串與片段則不納入檔案系統路徑。例如，"./tokens%20%23.css?v=1#theme" 讀取同目錄中名為 tokens #.css 的檔案。既有的裸相對 CSS 路徑如 "tokens.css" 也會展開。沒有對應本地檔案的裸套件匯入，仍交由宿主解析器處理。參照檔案仍只提供編譯階段情境，不會輸出其原生 CSS。對已備妥的虛擬樣式表，宿主明確指定為來源歸屬的檔案，也提供相對 CSS 參照的基準。參照主題 token 中的資源在其他地方使用時，仍以參照檔案為相對基準。

樣式表邊界與資源 URL

匯入的 media、supports 與 layer 限定會套用到被匯入的樣式表。發布 CSS 時請保留這些邊界，並以原始來源檔案解析影像與字型 URL。透過 @reference 使用的 token，也保留其定義檔案作為資源所屬來源。

全域 Master 定義應置於不帶限定的匯入或參照。帶有限定的匯入可以包含原生 CSS，包括套用先前已可用 mixin 的原生規則；但不能註冊 @theme、@utility、@mixin、@custom-media 或 @custom-container 定義。

@import "./tokens.css";@import "./print.css" print;@import "./components.css" layer(components);

每個 @import 都會再次內嵌其樣式表，因此同一檔案從多處匯入時會重複。單一匯入圖最多內嵌 10,000 份樣式表與 64 MiB CSS；共用檔案請匯入一次，不要從每個使用它的檔案匯入。

載入定義與掃描中繼資料不會發布檔案。CLI 檔案匯出與 Vite 正式建置會發布所需樣式表及資源。自訂編譯器宿主必須發布交付 API 回傳的每個資源；manifest 本身不會交付原生規則。請見渲染與樣式表交付及編譯器入口。

發布完整資源集合

編譯後的 CSS 入口仍可能匯入其他 CSS 檔案，或參照影像與字型。只發布入口文字，會讓這些相依資源無法取得。請保留每個回傳的 URL 與匯入限定；若子樣式表含有外部匯入，將它攤平可能改變載入順序或條件範圍。

從入口沿參照追蹤到子樣式表，再到影像。它們是各別交付的檔案；print 限定留在匯入上。名稱只是示例，不是生成檔名慣例。

文字說明

1. 交付的 app.css 以 print 限定匯入 print.css。子檔案仍是獨立樣式表，限定也留在其匯入上。
2. print.css 內的宣告，以子樣式表交付 URL 為基準相對參照 mark.svg。
3. 入口、子樣式表與影像都要發布到各參照解析出的 URL。只複製 app.css，會讓兩個相依資源無法取得。
4. 此圖是相依圖，不是請求瀑布圖。實際生成名稱與資源是否維持獨立，取決於編譯與宿主。

正式環境的攤平會保留階層串接：串接層陳述式留在原位，layer()、supports() 與 media 限定轉成對等的 @layer、@supports 與 @media 區塊，空樣式表則移除。樣式表頂端的外部匯入，若前方只有其他外部匯入，會隨樣式表一起上移。若樣式表在限定範圍下保留 namespace 或匯入，或其外部匯入會落在內嵌規則之後，就會保留為獨立檔案；同檔案中位於它之前的匯入也會如此，因為 @import 不能放在規則之後。

影像與字型保留定義樣式表作為來源所屬檔案，包括透過 @reference 使用的資源。發布時會改寫 URL，並保留查詢字串與片段。只供參照的樣式表，不會僅因定義被讀取就發布。

CLI 的 --no-export 路徑只列印 CSS，不複製資源。檔案匯出的監看模式在匯入樣式表或資源遺失時，會保留上次成功輸出、回報錯誤，並在恢復後重建。不要將舊輸出視為最新建置成功。

自訂宿主請用編譯器交付契約。Vite 的已處理文字、原始來源與 URL 匯入請見樣式表載入。路由層級樣式說明哪個頁面負責本地樣式表。

@reference

編譯需要另一份樣式表的定義，但不需要匯入其原生規則時，請使用參照。此範例從應用程式入口載入間距 token 與選擇器 mixin：

@import "@master/css";@mixin --manual-dark {  &:where([data-theme="dark"], [data-theme="dark"] *) {    @contents;  }}

@reference "../app.css";.button {  padding: var(--spacing-md);  @apply --manual-dark {    color: white;  }}

參照提供 token、utility、mixin、自訂 media、自訂 container 與原生關鍵影格定義供解析使用。它不會交付被參照檔案的原生 CSS、不會生成該檔案的 class，也不會加入掃描來源。已使用的受管理 token 與關鍵影格，仍可能讓本地輸出包含其相依資源。被參照的原生規則絕不作為使用根節點。原生覆寫需要真正的 @import 或另一份已交付樣式表。被參照的關鍵影格只會在本地使用時輸出。

兩種情況參照相同檔案，只有本地使用情況改變。輸出節錄省略外層 theme 串接層。

文字說明

1. 被參照檔案定義 --color-accent 與 .remote { color: var(--color-accent); }。未交付的原生規則不是使用根節點。
2. 只有參照時，token 可供使用，但不交付該原生規則，也不會只為它保留 token。
3. 加入 .local { color: var(--color-accent); } 後，本地使用端會保留 token。輸出仍不複製 .remote。

參照必須是頂層陳述式，且只包含一個加上引號的資源。相對路徑以宣告樣式表的目錄為基準。套件參照會解析已匯出的 CSS 入口。參照不是入口標記。

Vite、Next.js 與 Webpack 為本地樣式表、CSS Modules 與 SFC 樣式提供專案定義情境。對該情境外的相依資源或獨立編譯，可明確加入參照。本地樣式表不會成為掃描或修剪根節點。CSS Modules 與限定作用範圍的宿主，必須將生成的主題選擇器全域交付。

定義情境會在本地定義之前載入，因此本地定義可取代匯入或參照的定義。拆分 CSS 輸出的編譯器宿主，也必須追蹤哪份輸出交付共用變數與關鍵影格；請見編譯器資源所有權。