Next.js + Sass

Next.js 에서 scss를 사용하려면 next-sass 플러그인을 추가로 설치해야 한다. next-sass 플러그인을 설치하고 사용하는 방법은 다음과 같다.

모듈 설치

npm install --save @zeit/next-sass node-sass

프로젝트 루트 경로에 next.config.js 파일 생성

// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass()

/style.scss 파일 생성

$font-size: 50px;
.example {
  font-size: $font-size;
}

pages/index.js 파일 생성

import "../styles.scss"

export default () => <div className="example">Hello World!</div>

Comments