에러발생
React + Next js 조합의 Aplication 작업 중 아래와 같은 에러가 발생하였다.
Compiled with warnings
chunk styles [mini-css-extract-plugin]
Conflicting order between: …
원인
위 에러가 발생하는 조건은 다음과 같다.
- Next js 사용
- SCSS와 같은 CSS 전처리기 사용
- 컴포넌트 별로 다수의 SCSS 파일 적용
- 개발모드 실행
아마 이 에러가 발생한 프로젝트의 구조는 아래 캡쳐처럼 component별로 style을 지정 경우일 것이다.
(또는 다수의 .scss 파일을 여러곳에서 import 했거나,)
일반적으로 Webpack을 통해 build되는 어플리케이션은 한개의 최종 bundle 파일을 갖는다. 하지만 Next js는 각 페이지마다 import된 CSS 파일들을 빌드한다.
여기서 발생하는 에러는 각 페이지마다 import 되는 SCSS 파일들의 순서가 일치하지 않아, mini-css-extract-plugin 입장에서 bundle 파일을 만들기위한 CSS 정의 작업을 진행하지 못하는 것이다.
해결법
build 순간 .scss의 import 순서가 뒤섞인 것이 원인이기에, 해당 파일들의 import 순서를 정리하는 작업을 해야한다.
이 문제의 해결 방법은 많을 것이다. 그 중, component에서 사용되는 스타일 파일들을 한 개의 .scss 파일에 정의하는 방법을 사용 할 것이다.
위 캡쳐 처럼, 기존 각 component에서 import한 .scss 파일들을 하나의 index에 정의해 준다. 그리고 각 component는 하나의 파일로 정의된 .scss를 import 해준다.
위 작업을 진행하고, 테스트를 해보면 정상 동작하는것을 확인 할 수 있다.
결론
필자의 경우 원래 한개의 스타일 파일로 관리했지만, "퍼블리셔/디자이너/개발자 작업 분산", "compoent별 스타일/테스트 파일 분류" 등의 조건으로 component 기준의 구조로 관리하는 것이 효율적이라 판단하였다.
vue js, react js 의 경우 위와 같은 구조임에도 대부분 에러가 발생하지 않을 것이다.
결과적으로 Next js의 스타일 building 방식으로 인한 이슈 였고, 에러 내용이 로깅되지 않아 원인 찾기가 쉽지 않았다.
