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;
}

// maps to root / URL

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

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