Next.js Sass 가이드 정리

1. Sass 개요

Next.js는 Sass(.scss, .sass)를 기본 지원합니다. Sass 패키지 설치 후 바로 사용할 수 있습니다.

.scss: SCSS 문법(일반 CSS의 상위 호환)
.sass: Indented Syntax(들여쓰기 기반 Sass 문법)
컴포넌트 단위 스타일은 CSS Modules로: .module.scss / .module.sass

2. Step 1: Sass 설치

npm install --save-dev sass

3. Step 2: 파일 확장자와 CSS Modules 사용

전역 스타일: *.scss / *.sass
컴포넌트 단위(권장): *.module.scss / *.module.sass

예시(개념):

/* app/components/Button.module.scss */
.button {
  padding: 12px 16px;
}

// app/components/Button.tsx
import styles from './Button.module.scss'

export function Button() {
  return <button className={styles.button}>Click</button>
}

4. Step 3: Sass 옵션 커스터마이징 (next.config)

Sass 로더 옵션을 조정하려면 next.config에서 sassOptions를 사용합니다.

4.1 공통 Sass 코드 주입 (additionalData)

예: 모든 파일에 변수/믹스인 등을 자동으로 주입

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig

4.2 Sass 구현체 선택 (implementation)

기본은 sass 패키지를 사용합니다. 다른 구현체를 쓰려면 implementation을 지정합니다.

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

export default nextConfig

5. Step 4: Sass Variables를 JS/TS로 내보내기

Next.js는 CSS Module 파일에서 Sass 변수를 export할 수 있습니다.

/* app/variables.module.scss */
$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// app/page.tsx
import variables from './variables.module.scss'

export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

6. 정리 및 팁

CSS Modules(.module.scss)를 사용하면 클래스 이름 충돌을 방지할 수 있습니다.
sassOptions.additionalData를 활용하면 전역 변수나 믹스인을 모든 파일에 자동으로 주입할 수 있습니다.
Sass 변수는 :export 구문을 통해 JavaScript/TypeScript에서 사용할 수 있어 동적 스타일링이 가능합니다.
성능 최적화를 위해 컴포넌트 단위 스타일을 권장합니다.

# Next.js Sass 가이드 정리