가이드: Sass

가이드: Sass | Next.js

Source URL: https://nextjs.org/docs/pages/guides/sass

Next.js에서 Sass 사용하는 방법

마지막 업데이트: 2026년 2월 20일

Next.js는 .scss와 .sass 확장자를 사용하는 패키지를 설치하면 Sass 통합을 기본 지원합니다. CSS Modules와 .module.scss 또는 .module.sass 확장을 통해 컴포넌트 단위의 Sass를 사용할 수 있습니다.

먼저 sass를 설치하세요:

pnpmnpmyarnbun

Terminal

    pnpm add -D sass

알아두면 좋아요 :

Sass는 확장자가 다른 두 가지 문법을 지원합니다. .scss 확장자는 SCSS 문법을 사용해야 하고, .sass 확장자는 들여쓰기 문법(“Sass”)을 사용해야 합니다.

어떤 것을 선택할지 확신이 없다면 CSS의 상위 집합이며 들여쓰기 문법(“Sass”)을 새로 배울 필요가 없는 .scss 확장자부터 시작하세요.

Sass 옵션 커스터마이징

Sass 옵션을 구성하려면 next.config에서 sassOptions를 사용하세요.

next.config.ts

JavaScriptTypeScript

    import type { NextConfig } from 'next'

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

    export default nextConfig

구현

sass 구현체를 지정하려면 implementation 속성을 사용할 수 있습니다. 기본적으로 Next.js는 sass 패키지를 사용합니다.

next.config.ts

JavaScriptTypeScript

    import type { NextConfig } from 'next'

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

    export default nextConfig

Sass 변수

Next.js는 CSS Module 파일에서 내보낸 Sass 변수를 지원합니다.

예를 들어, 내보낸 primaryColor Sass 변수를 사용하는 방법은 다음과 같습니다:

app/variables.module.scss

    $primary-color: #64ff00;

    :export {
      primaryColor: $primary-color;
    }

pages/_app.js

    import variables from '../styles/variables.module.scss'

    export default function MyApp({ Component, pageProps }) {
      return (
        <Layout color={variables.primaryColor}>
          <Component {...pageProps} />
        </Layout>
      )
    }