Sass

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

먼저 sass (opens in a new tab)를 설치합니다:

Terminal

npm install --save-dev sass

알아두면 좋은 점:

Sass는 각기 다른 확장자를 가진 두 가지 문법 (opens in a new tab)을 지원합니다. .scss 확장자는 SCSS 문법 (opens in a new tab)을 사용해야 하고, .sass 확장자는 들여쓰기 문법("Sass") (opens in a new tab)을 사용해야 합니다.

어떤 것을 선택해야 할지 모르겠다면, CSS의 상위 집합이고 들여쓰기 문법("Sass")을 배우지 않아도 되는 .scss 확장자로 시작하세요.

Customizing Sass Options

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

next.config.js

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

Sass Variables

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

CSS in JS Optimizing