가져오기

@import로 스타일시트를 전달하고 그 정의를 사용할 수 있게 합니다. 로컬 컴파일에 정의가 필요하지만 다른 출력이 네이티브 스타일시트를 담당한다면 @reference를 사용하세요. 앱 설정은 설치, 라우트별 소유 관계는 라우트 단위 스타일을 참고하세요.

두 로컬 출력 모두 bg-brand를 사용합니다. 가져오기는 네이티브 .card 규칙을 전달하고 참조는 정의만 사용할 수 있게 합니다. 로컬에서 사용하는 토큰은 어느 출력에도 포함될 수 있습니다.

텍스트 설명

1. tokens.css는 @theme에서 --color-brand를 선언하고, 이를 참조하는 네이티브 .card 규칙도 정의합니다. 두 로컬 컴파일의 차이는 @import와 @reference뿐입니다.
2. 두 로컬 출력은 모두 bg-brand를 생성하고 --color-brand 의존성을 유지합니다.
3. 가져오기 출력만 .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를 읽습니다. 기존의 "tokens.css" 같은 단순 상대 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 출력을 나누는 컴파일러 호스트는 공유 변수와 키프레임을 어떤 출력이 전달하는지도 추적해야 합니다. 컴파일러 리소스 소유권을 참고하세요.