:global() 에서 & 적용이 안되는거 같아요

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

작성한 질문수

Svelte.js [Core API] 완벽 가이드

30. word-break 적용과 제품 모드의 로그 제거(@rollup/plugin-strip)

작성

243

:global() 에서 & 적용이 안되는거 같아요

bundle.css에서도 &.sortable-chosen

이런식으로 나오는데 뭐가 문제인가요?

어느순간부터 갑자기 적용이 안되네요..

&.className 이나 &:hover 이런거 잘 되고

:global(.className) 이것도 잘 되는데

:global()에 & 이게 들어가면 적용이 안되네요

일단은 따로 빼서 :global(.list.sortable-chosen) 이렇게 사용하는중입니다..

답변 1

지식공유자

최혁준 님 안녕하세요!
질문이 올라온지 한달이나 되었네요. 제가 전혀 모르고 있다가 이제야 확인했어요..ㅠㅜ
많이 기다리셨을 텐데 정말정말 죄송해요..🙏

언제 바뀌었는지 정확한 버전은 확인을 못했는데, 컴파일러 버전이 달라지면서 :global() 해석이 현재 HTML 템플릿에 없는 내용은 무시하는 듯해요.(원래는 안 그랬어요..)

.sortable-chosen은 HTML 템플릿에는 없고 라이브러리가 런타임에서 추가하는 선택자니까요.

&.className이나 &:hover는 참조할 선택자가 작성한 HTML 템플릿에 있기 때문에 잘 동작하고요.

그래서 결과적으로 혁준 님께서 사용하시는 방법처럼 :global(.list.sortable-chosen)과 같이 작성하는 게 맞을 듯합니다.

작성한 질문수