CSS Modules_글로벌 모드 관련 syntax error

에러 상황

CSS Modules 에서 :global을 이용한 전역화가 잘 진행되지 않는 오류

에러 메세지

해결 방법

sass의 중첩 문법 안에 :global( 선택자 ) 와 같은 식으로 작성하니 정상적으로 전역화가 되었다. CSS Modules의 공식 github 에서도 언급되지 않았던 부분이라 스택 오버플로우를 통해 찾을 수 있었다.

문제발생 원인

아직 정확한 원인은 모르겠으나, :global 문법이 Sass나 CSS Modules에서 제공하는 것은 아닌 것으로 보인다. 어떤 글에서는 CSS loader 와 관련이 있을 수 있다고 하였으므로 이에 대해서 더 찾아볼 예정이다.

레퍼런스

stackoverflow - Selector ":global .class" is not pure