Vue에서 scoped란..?

vue 개발을 하면서 보통 스타일 태그에 보통 scoped를 주어 사용할 것입니다.
하지만 이렇게 되면 컴포넌트로 정의해놓은 UI를 적용 페이지에 맞게 입맛대로 커스텀해서 사용하기가 힘들 것 입니다. 특히나 페어코팅을 하고 컴포넌트가 내가 만든것이 아니라면 더욱이 그렇죠.

그래서 입맛대로 바꾸려면 어떻게..?

이런 경우를 대비해서 vue에서 정확히는 vue-loader에서는 Deep Selectors를 제공하고 있습니다.

일반적인 css에서는

.a >>> .b {...}

위 처럼 주면 되지만 scss를 사용한다면 위 명령어가 정상작동하지 않을 것입니다.

scss에서는

.a::v-deep .b {...}

위로 공식 사이트에서는 말하고 있지만...
실제 개발서버에서 실행하면 빌드하는 동안 경고문이 나옵니다.

Vue 3 ::v-deep usage as a combinator has been deprecated. Use ::v-deep() instead

위처럼이요

vue 3에서는 따라서 권장되는 방법으로

.a:deep(.b){...}

이와 같이 작성해야 좋다고 나옵니다.

스타일린트를 사용하고 있다면..?

만일 스타일린트를 사용하고 있다면 위 선택자를 사용하려고 하면 옵션이 없다고 오류를 뱉을 것 입니다. 따라서 린트룰을 수정해서 해당 린트룰을 null로 바꿔주면 정상 작동하여 스타일이 적용될 것 입니다.

참고사이트

vue-loader
스택오버플로우