Next SCSS 설치와 가이드

Next.js에는 scss,sass 내재되어 있는 방식 (CSS Module)같이 지원하기 때문에

패키지 하나 받으면 이름.module.scss 형식을 사용할 수 있다.

 

 

 

패키지 다운로드

npm install sass
yarn add sass

 

 

 

 

 

다운로드 하고 next.js docs에 나와 있는대로 

next.config.js 폴더에 넣어준다.

const path = require("path");

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

 

 

 

 

준비는 끝났다! 어떻게 적용하지?

 

모듈 css처럼 뒤에 module.scss 확장자를 붙여주면 된다.

 

 

 

 

그리고 해당 사용하고자 하는 해당 컴포넌트에서 import로 불러온다.