导入

使用 @import 交付样式表并使其中的定义可用。如果本地编译需要这些定义，但原生样式表由其他输出负责交付，请使用 @reference。应用设置请遵循安装；路由独立拥有的样式见路由级样式。

两份本地输出均使用 bg-brand。导入交付原生 .card 规则，引用则仅使定义可用。本地使用的令牌仍可在任一输出中产生。

文字说明

1. tokens.css 在 @theme 中声明 --color-brand，并定义读取它的原生 .card 规则。两次本地编译的唯一区别是使用 @import 还是 @reference。
2. 两份本地输出均生成 bg-brand，并保留其 --color-brand 依赖。
3. 仅 import 输出包含 .card。引用不会让该规则成为本地使用根节点，也不会发布被引用样式表。
4. 分支比较的是编译输出，并非运行时加载步骤。原生覆盖也需要实际交付样式表。

@import "@master/css"

包导入是唯一的项目入口标记。它加载预设的原生 CSS，包括稳定的层顺序和基础样式，并标识接收生成工具类 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 引用的基准。引用主题令牌中的资源在其他地方使用时，仍相对于引用文件。

样式表边界与资源 URL

导入的 media、supports 和 layer 限定应用于被导入的样式表。发布 CSS 时请保留这些边界，并从原始源文件解析图像和字体 URL。通过 @reference 使用的令牌也保留其定义文件作为资源所属来源。

全局 Master 定义应放在不带限定的导入或引用中。带限定的导入可以包含原生 CSS，包括应用先前已可用混入的原生规则；但不能注册 @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

编译需要另一份样式表的定义，但不需要导入其原生规则时，请使用引用。此示例从应用入口加载间距令牌和选择器混入：

@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;  }}

引用提供令牌、工具类、混入、自定义媒体、自定义容器及原生关键帧定义供解析使用。它不会交付被引用文件的原生 CSS，不会生成其类，也不会添加扫描源。已使用的受管理令牌和关键帧仍可能使本地输出包含其依赖资源。被引用的原生规则绝不作为使用根节点。原生覆盖需要真正的 @import 或另一份已交付样式表。被引用的关键帧仅在本地使用时输出。

两种情况引用相同文件，仅本地使用情况改变。输出节选省略外层 theme 层。

文字说明

1. 被引用文件定义 --color-accent 和 .remote { color: var(--color-accent); }。未交付的原生规则不是使用根节点。
2. 仅有引用时，令牌可供使用，但不交付该原生规则，也不会仅为它保留令牌。
3. 加入 .local { color: var(--color-accent); } 后，本地引用方保留令牌。输出仍不复制 .remote。

引用必须是顶层语句，且仅包含一个带引号的资源。相对路径以声明样式表的目录为基准。包引用解析已导出的 CSS 入口。引用不是入口标记。

Vite、Next.js 和 Webpack 为本地样式表、CSS Modules 与 SFC 样式提供项目定义上下文。对于该上下文外的依赖或独立编译，显式引用很有用。本地样式表不会成为扫描或裁剪根节点。CSS Modules 与限定作用域的宿主必须全局交付生成的主题选择器。

定义上下文在本地定义之前加载，因此本地定义可以替换导入或引用的定义。拆分 CSS 输出的编译器宿主也必须追踪哪份输出交付共享变量与关键帧；请见编译器资源所有权。