Sass

사용법

Next.js는 .scss와 .sass 확장자 모두를 지원하는 내장 Sass 지원 기능을 가지고 있습니다. .module.scss 또는 .module.sass 확장자와 CSS 모듈을 통해 컴포넌트 수준의 Sass를 사용할 수 있습니다.

먼저 sass를 설치하세요.

npm install --save-dev sass

Sass는 각각 자신의 확장자를 가진 두 가지 다른 문법을 지원합니다. .scss 확장자는 SCSS 문법을 사용하도록 요구하며, .sass 확장자는 들여쓰기 문법("Sass")을 사용하도록 요구합니다.

어떤 것을 선택해야 할지 확실하지 않다면, CSS의 상위 집합인 .scss 확장자로 시작하십시오. 이는 들여쓰기 문법("Sass")을 배울 필요가 없습니다.

Sass 옵션 커스터마이징

Sass 컴파일러를 설정하고 싶다면, next.config.js의 sassOptions를 사용하세요.

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

Sass 변수

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

예를 들어, 내보낸 primaryColor Sass 변수를 사용하는 경우에는 아래와 같습니다.

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// 루트 `/` URL로 매핑됩니다

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

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