Sass

Next.js는 패키지를 설치한 후 .scss와 .sass 확장자를 사용하여 Sass와의 통합을 기본적으로 지원합니다. CSS Modules 및 .module.scss 또는 .module.sass 확장자를 통해 컴포넌트 수준의 Sass를 사용할 수 있습니다.

먼저, sass를 설치하세요:

Terminal

npm install --save-dev sass

알아두면 좋은 점:

Sass는 각기 다른 두 가지 문법을 지원하며, 각 문법에는 고유한 확장자가 있습니다. .scss 확장자는 SCSS 문법을 사용해야 하며, .sass 확장자는 들여쓰기 문법 ("Sass")을 사용해야 합니다.

어느 것을 선택해야 할지 확신이 없다면, CSS의 상위 집합이며 들여쓰기 문법을 배우지 않아도 되는 .scss 확장자를 사용하는 것이 좋습니다.

Sass 옵션 커스터마이징

Sass 컴파일러를 구성하려면 next.config.js에서 sassOptions를 사용하세요.

next.config.js

const path = require("path");
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};

Sass 변수

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

예를 들어, 내보낸 primaryColor Sass 변수를 사용하는 경우:

app/variables.module.scss

$primary-color: #64ff00;
 
:export {
  primaryColor: $primary-color;
}

app/page.js

// 루트 `/` URL에 매핑됩니다
 
import variables from "./variables.module.scss";
 
export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>;
}

Tailwind CSS CSS-in-JS