[개인프로젝트] 명일방주 정보 조회용 프론트엔드 세팅 (Next.js + SCSS)

 

서론

일단, Next.js로 클라이언트를 개발해 보기로 마음 먹긴 했는데..

나는 사실 React도, Next.js도 사용해 본적이 없다.. ㅎㅎ..

Vue.js를 사용해 본 적이 있어서 대충 개념을 하루정도 익힌 뒤, 일단 세팅..

퍼블리싱은 SCSS를 사용하기로 했다.

 

 

Next.js에 SCSS 세팅

일단 프로젝트를 만들자.

php
npx create-next-app <project-directory>

얼추 세팅을 진행하고

php
npm i sass

sass 모듈을 추가해 주었다.

이후 해당 부분 세팅이 제대로 진행 되었는지, 기존에 있는 global.css, Home.module.css를
global.scss, Home.module.scss로 이름 변경 하였다.

또, 전역 스타일링을 위해서 _mixins.scss, _variable.scss를 추가 했다.

 

이후, next.config.js 파일을 수정했다.

javascript
const path = require('path')
const nextConfig = {
  experimental: {
    appDir: true,
  },
  sassOptions: {
    includePath: [path.join(__dirname), 'styles'],
    prependData: `@import "styles/_variables.scss"; @import "styles/_mixins.scss";`,
  }
}

module.exports = nextConfig

 

오류 없이 index 페이지가 뜨는 것을 확인!

이제 너무 늦어서 내일 구조와 퍼블리싱을 진행해 보아야 겠다..

 

SCSS 세팅은 아래 블로그를 참조했다.

 

https://velog.io/@ice-prince/Next.Js-%EC%97%90%EC%84%9C-Scss-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[Next.Js] 에서 Scss 사용하기