Vue에서 scoped된 컴포넌트의 하위로 scss 스타일을 강제로 줘보자!(::v-deep, :deep)

2022년 5월 경에 작성한 블로그 글을 이관한 포스트입니다.

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(<inner-selector>) instead

위처럼이요

 

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

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

 

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

 

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

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

 

참고사이트

https://vue-loader.vuejs.org/guide/scoped-css.html

Scoped CSS | Vue Loader

https://stackoverflow.com/questions/63986278/vue-3-v-deep-usage-as-a-combinator-has-been-deprecated-use-v-deepinner-se

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