Next.js 프로젝트에서 sass/scss 사용하기

✔️ 필요성

Next.js 프로젝트에서 CSS module인 sass/scss를 사용해보겠다

 

 

✔️ 방법

npm i sass

 

next.config.js를 아래와 같이 수정해준다

//next.config.js
const path = require('path')

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

 

루트프로젝트에 있는 styles 폴더 내의 global.css와 Home.module.css 이름을 global.scss와 Home.module.scss로 바꾸고 해당 파일을 import 해주는 곳에서도 이름을 바꾼다

 

원하는 CSS를 입력한 뒤 사용한다

/* Home.module.scss */
.test {
  color: red;
  font-size: 30px;
}

//index.tsx
import type { NextPage } from "next";
import styles from "../styles/Home.module.scss";

const Home: NextPage = () => {
  return (
    <div>
      <p className={styles.text}>TEST</p>
    </div>
  );
};

export default Home;

 

확인할 때는 아래처럼!

yarn dev