[TIL] 08.31 Next.js sass "attribute starts with" error

next 에서 그리드 시스템을 적용하는 중 속성 선택자로 [class^="col-"] 와 같이 설정을 해 두었을 경우 pure css 에는 className 또는 id 값이 있어야 한다 라는 에러가 뜨게 된다. 이 에러의 원인은 next.js 였다.

 

next.js 9.2 이상 버전에서 sass 속성 선택자 attribute starts with 는 전역 css 에서만 사용이 가능하다.

나는 _grid.module.scss에서 적용을 해주고 있었는데 _grid.scss 로 바꾸어 주고 App.js 에서 전역으로 적용을 해주어야 했다.

아래 깃헙 이슈에서 이 문제를 발견하고 해결할 수 있었다. 

https://github.com/vercel/next.js/issues/10142