본문으로 건너뛰기

시작하기

설치​

sh
npm install @vanilla-extract/css
sh
npm install @vanilla-extract/css

번들러 통합​

바닐라 엑스트랙트를 사용하려면 번들러를 설정하고 CSS를 처리하도록 설정해야 합니다. 이를 통해 스타일을 코드의 다른 종속성과 동일하게 처리하여 필요한 항목만 가져오고 묶을 수 있습니다.

원하는 번들러 통합을 설치하세요.

스타일 만들기​

스타일시트는 프로젝트에 .css.ts 파일을 추가하여 만들 수 있습니다.

app.css.ts
tsx
import { style } from '@vanilla-extract/css';
export const container = style({
  padding: 10,
});
app.css.ts
tsx
import { style } from '@vanilla-extract/css';
export const container = style({
  padding: 10,
});
CSS
css
.app_container__sznanj0 {
  padding: 10px;
}
CSS
css
.app_container__sznanj0 {
  padding: 10px;
}

중요한 것은, 이것이 두 가지 일을 수행한다는 것입니다.

  1. 로컬 범위 클래스를 만듭니다.
  2. 생성된 클래스 이름을 내보냅니다.

스타일 적용하기​

요소에 스타일을 적용하려면 스타일시트에서 가져와야 합니다.

스타일을 가져오면, 생성되며 범위가 지정된 클래스 이름을 받아 요소의 class 속성에 적용할 수 있습니다.

app.ts
ts
import { container } from './styles.css.ts';
document.write(`
  <section class="${container}">
    ...
  </section>
`);
app.ts
ts
import { container } from './styles.css.ts';
document.write(`
  <section class="${container}">
    ...
  </section>
`);
styles.css.ts
ts
import { style } from '@vanilla-extract/css';
export const container = style({
  padding: 10,
});
styles.css.ts
ts
import { style } from '@vanilla-extract/css';
export const container = style({
  padding: 10,
});
CSS
css
.styles_container__1hiof570 {
  padding: 10px;
}
CSS
css
.styles_container__1hiof570 {
  padding: 10px;
}

이 가져오기 덕분에 CSS도 번들러에 의해 처리됩니다.