module.css 에 대해 문의드립니다.

Question

module.css 에서 :global 에 대한 궁증즘이 생겨 문의드립니다.

1번 방법

.header {
  height: 60px;
  font-weight: bold;
  font-size: 18px;
  line-height: 60px;
  :global(a) {
    color: black;
    text-decoration: none;
  }
}

2번 방법

.header {
  height: 60px;
  font-weight: bold;
  font-size: 18px;
  line-height: 60px;
  :global {
    a {
      color: black;
      text-decoration: none;
    }
  }
}

3번 방법

:global(a) {
  color: black;
  text-decoration: none;
}

4번 방법

:global .header a {
  color: black;
  text-decoration: none;
}

위 방법 모두 아래와 같은 에러가 뜨고 있습니다.
Selector ":global" is not pure (pure selectors must contain at least one local class or id)

제가 숙지하기로는 css nested 문법은 최신문법으로 sass,postcss 등이 없어도 지원이 되고있는 걸로 알고 있어서 처음에는
sass,postcss 등 설치없이 진행했다가 안되서 모두 설치해 보고 위를 모두 실행해 봤는데도 같은 에러가 나고 있습니다.

어떻게 하면 에러가 나지 않을까요?
참고로 저는 퍼블리셔로 일하고 있는데 현재 일하고 있는 프로젝트에서는 :global 을 아래와 같이 사용하고 있는 중입니다.

.header {
  height: 60px;
  font-weight: bold;
  font-size: 18px;
  line-height: 60px;
  :global {
    a {
      color: black;
      text-decoration: none;
    }
  }
}

여기 프로젝트 소스가 복잡하기도 하고 얕은 지식으로 분석을 해보긴 했으나 해결이 안되고 있습니다.
한입 넥스트를 진행하면서 :global 를 적용하려고 테스트해봤지만 잘 안되어 문의드리오니 소중한 답변 부탁드립니다.

이정환 Winterlood · Answer

안녕하세요 이정환입니다.

저도 처음 보는 이슈라 궁금해 직접 찾아보니 Next.js에서는 기본적으로 module.css에서의 :global, :local 사용자를 허용하지 않는 듯 합니다. 이런 이유로 CSS 로더 설정을 직접 커스텀 하시는 경우도 있다고 하네요 ...

아마도 Next.js의 module css에서 사용되는 모든 클래스네임은 당연 로컬할 거라고 간주되기 때문인 것 같은데 정확한 이유는 저도 잘 모르겠습니다 😅

아래의 링크에 여러가지 해결책이 있다고 하니 참고해보시면 좋을 것 같습니다.

https://stackoverflow.com/questions/68530854/issue-with-global-css-module-selectors-not-being-pure-in-nextjs

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 김재희님.

CSS Modules에서 :global을 사용할 때 발생하는 문제에 대해 문의 주셨군요. CSS Modules를 사용할 때 :global은 전역 스타일을 지정하는 방법으로 이용되며, 기본적으로 CSS Modules에서는 지역 스코프가 기본이기 때문에 사용 시 주의가 필요합니다. 에러 메시지인 “Selector ‘:global’ is not pure”는 :global이 포함하더라도 지역 클래스를 추가해야 한다는 것을 의미합니다.

문제 해결에 대한 제안:

Pure Selector 사용: :global은 글로벌 스타일을 정의하기 때문에 특정 지역 스타일을 갖고 있어야 에러가 발생하지 않습니다. 따라서, 기본적으로 지역 클래스를 포함시킨 상태에서 글로벌 스타일을 추가해야 합니다.
구문 수정:
- :global을 사용할 시, 선언부에 최소한 하나의 로컬 클래스 또는 아이디가 포함되어야 합니다. 이를 위해 적절히 .header와 결합해야 합니다.

예를 들어, 다음과 같은 방식으로 수정할 수 있습니다:

   .header :global(a) {
     color: black;
     text-decoration: none;
   }

이 방식은 .header 내부의 a 요소를 제외하면서도 .header가 지역 클래스로 남기 때문에 문제가 없습니다.

설치 및 설정 확인: 설정이나 설치에 문제가 있을 수도 있으므로, sass와 postcss의 설치 및 설정이 제대로 되어 있는지 확인해 보세요. 특히, next.config.js에서 cssModules 설정이 적절히 되어 있는지 체크하세요.

관련해서 같은 이슈를 겪고 해결한 경험을 공유한 작성자는 아래와 같습니다:
- “Next.js에서 module.css 사용 시 :global 스타일 적용하기”

위 내용이 도움이 되기를 바랍니다. 문제 해결에 어려움이 있다면 프로젝트 설정 파일이나 관련 소스 코드를 보여주시면 더 정확한 도움을 드릴 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

module.css 에 대해 문의드립니다.

문제 해결에 대한 제안: