css 적용 ( HMR 혹은 hot reload 문제 ) 관련 질문..

[정재우]

안녕하세요 .. 

문제점 ? 
- css가 실시간으로 적용이 안된다는 점..

어떻게 ?
1. node 버전 18.17.0 / nextjs 버전 13.4.12 / 각 컴포넌트마다 .module.scss 로 css 적용 중 / npm i sass로 따로 sass 설치 하였음 / 각 scss 파일들은 styles폴더에 관리중 , next.config.js 에 styles 폴더 path 추가하였음
2. npm run dev로 서버 시작후 특정 페이지에 들어갑니다. 예시) localhost:3000/testpage
3-1. 서버 실행전 scss 에서 background : black 으로 설정. 서버실행후 페이지에 들어갔을때 black 확인
3-2. 서버 실행 상태에서 scss 코드 수정 . (black ->red) . 코드 저장하면 실시간으로 black-> red로 바뀜.
3-3. 다시한번 red -> blue 코드 수정. 이때부터 적용되지않음.. 

HMR 이슈인거 같음. 해결하기위해 시도한 방법들
A. 캐시 지우기
B. next.config.js 에서 webpack 관련 설정해봄
C. node module, package-lock 삭제후 재설치
D. nextjs 버전 13.2.4로 바꿔봄

다해봤는데 안되네요.. 리눅스 환경 만들고 실행하면 괜찮으려나요. 
뭐가문제일까요 ㅠㅠ 매번 서버 재시동, css 적용 확인하면서 개발할 수도 없고... 
도와주세요 ㅠ

13.4.12

[codingapple]

page.js 옆에 page.module.scss 만들어서 클래스명바꾸고 저장해도 잘적용됩니다 
새로 프로젝트 만들어서 테스트해봅시다

[정재우]

새 프로젝트 생성해서 하니 또 잘되네요 ..;; 안되는 프로젝트 vs 잘되는 프로젝트 파일, 코드, package.json 등등 전수 비교했는데
환경이 같은데 어느 한쪽은 되고 어느 한쪽은 안되는 현상이 참 아이로닉 하네요.. 그것보다..
page안에 컴포넌트들 좋아하고 각 컴포넌트들마다 css 파일들 만들어서 1대1 매칭으로 구조를 짜려 하는데.. 
인터넷 찾아보니 보통 styles폴더 안에서 다 관리를 하더라고요 . 근데 components 폴더  , styles 폴더 각각 따로따로 나누면 또
너무 복잡해보이고... 쌤이 추천하시는 구조는 어떤걸까요 ?
예시 ) orderstate.js , orderstate.module.scss 이런식으로 1대1 매칭으로 하면 컴포넌트 수 만큼 css 도 늘어나게 되서 너무 복잡해 보이기도 하면서
 동시에 코드수정할땐 편한거 같기도하고 .. 근데 또 css 파일 수가 너무 많으면 왔다갔다 너무 힘들어서 page.module.scss에서 한 페이지 안에 있는 
모든 컴포넌트들 css 먹이기엔 코드가 너무 긴 거같기도.. 고민입니다 ㅠ

[codingapple]

여러명이서 분업하면 각 컴포넌트마다 css 넣는 게 편할수도 있습니다

[글쓴이]

글