next.js에서 sass사용하기

next.js에서 sass사용하기

react에서 썼던 것처럼 당연히 될 줄 알았는데 이게 웬걸 오류가 뜬다. 해서 찾아보니 방법이 다 있더라.

$ npm install --save @zeit/next-sass node-sass //npm
$ yarn add @zeit/next-sass node-sass           //yarn

그리고 프로젝트 루트디렉토리에 next.config.js를 생성한다. package.json과 같은 위치라고 보면 된다. 그 안에 다음 내용을 입력한다.

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

sass뿐만 아니라 css도 같이 사용할 거라면 아래와 같이 입력하면 된다.

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

 그리고 sass와 scss파일을 만들어 사용하면 된다.