728x90 반응형 vanilla-extract2 vanilla extract 사용하기 - Selectors styling Selectors 두 가지 방법을 통해 주어진 스타일에 대한 selector를 지정할 수 있다. simple pseudo selectors 매개변수를 사용하지 않아, 알아보기 쉽고 간단하다. styles.css.ts import { style } from '@vanilla-extract/css'; const myStyle = style({ ':hover': { color: 'pink' }, ':first-of-type': { color: 'blue' }, '::before': { content: '' } }); selectors key 좀 더 복잡한 규칙은 selectors key를 통해 지정해줄 수 있다. import { style } from '@vanilla-extract/css'; .. 2023. 8. 31. vanilla extract 사용하기 - 기본 튜토리얼을 차근차근 따라해 볼 예정. Getting Started 설치 npm install @vanilla-extract/css yarn add @vanilla-extract/css 번들러 통합 vanilla-extract는 zero-runtime stylesheets를 지원하기 위해, 빌드 타임에 스타일을 최적화한다. (css class name 해싱 및 생성, 스타일 생성, 불필요 코드 제거 등) 이렇게 최적화된 스타일을 runtime시 추가적인 작업 없이 사용할 수 있도록 하기 위해, 해당 프로젝트의 번들가 vanilla-extract와 함께 동작하도록 설정되어야하는데 → 프로젝트 번들러에 맞는 vanilla-extract plugin을 추가하는 방식으로 이뤄진다! next와 함께 사용해 볼 예정.. 2023. 8. 30. 이전 1 다음 728x90 반응형
