Sass 파일의 이름과 import 위치가 스타일 범위를 정한다

Next.js는 Sass 문법을 CSS로 바꿔 주지만, 앱 전체 규칙과 컴포넌트 전용 규칙을 나누는 경계는 파일 구조로 직접 정해야 한다.

Sass 파일의 이름과 import 위치가 스타일 범위를 정한다…Next.js는 Sass 문법을 CSS로 바꿔 주지만, 앱 전체 규칙과 컴포넌트 전용 규칙을 나누는 경계는 파일 구조로 직접 정해야 한다.

컴파일 준비

sass 패키지

.scss 와 .sass 를 빌드 입력으로 인식한다. 브라우저에는 변환된 CSS만 전달된다.

앱 전체

reset, body, CSS 변수처럼 전체에 적용할 규칙을 Root Layout에서 한 번 가져온다.

컴포넌트 지역

클래스 이름을 빌드 시 지역화해 다른 컴포넌트의 같은 이름과 충돌하지 않게 한다.

핵심공유 재료 변수와 mixin은 _tokens.scss 같은 partial에 두고 @use 로 불러온다. 실제 selector의 전역·지역 범위는 이를 사용하는 파일이 결정한다.