nextJS css 에러

nextjs에서는 _app.tsx 파일에서만 .css 파일을 사용할 수 있다.

그 이유는 일반적인 .css 파일은 브라우저에 보여질 때 하나의 파일로 합쳐지는데

이름이 같은 클래스가 있으면 충돌이 발생한다.

 

하지만 module.css를 사용하면 빌드 시 식별자 앞에 해쉬가 붙어서

이름 충돌 문제가 해결된다.

즉, 모든 클래스 이름이 지역 스코프를 가지게 된다. 

 

따라서 다른 컴포넌트들에서는 module.css를 사용해야한다.

그렇지 않을 경우 다음과 같은 에러를 마주하게 된다.

 

 

 

또 다른 에러는 

 

"Selector is not pure"라는 오류는 주로 Next.js에서 CSS Modules를 사용할 때 발생하는데, 

이 오류는 선택자(selector)가 순수(pure)하지 않다는 것을 나타낸다.

여기서 "순수한(pure)" 선택자란 CSS Modules에서

스타일을 지역적으로 유지하기 위해 클래스 이름을 자동으로 생성하는 방식을 의미한다.

이것은 일종의 스코핑(scoping) 메커니즘으로, 각 컴포넌트의 스타일이 서로 간섭하지 않도록 하는 역할을 한다.

하지만, "header"을 사용하는 비순수(non-pure) 선택자가 있다면, 

해당 스타일은 지역적으로 적용되지 않고 전역으로 적용될 수 있다.

이러한 선택자를 사용하는 경우,

컴포넌트 스코프 밖에서도 스타일이 적용될 수 있어 스타일 간 충돌이 발생할 수 있다.

문제 해결을 위해 "Selector is not pure" 오류를 해결하려면

Module CSS 파일에서 "header"을 사용하는 부분을 찾아서 순수한 선택자로 변경하거나,

Next.js의 css-loader에서 순수 모드(pure mode)를 사용하지 않도록 설정하는 등의 대응이 필요하다.

마지막으로, 이러한 제약은 Next.js가 최적화를 위해 css-loader를 순수 모드로 사용하고 있기 때문에 발생하는 것이다.

이는 합리적인 최적화를 위한 제약이라고 볼 수 있다.

 

참고 :  https://github.com/vercel/next.js/discussions/16050#discussioncomment-49022