[CSS] deep selector

부모 컴퍼넌트에 있는 엘리먼트 뿐만 아니라 자식 컴퍼넌트에도 동일한 클래스명이 있다면 전부 적용

 

CSS 에서 사용 하는 방법

.parent-class >>> .child-class { /* ... */ } // 1번째 사용 방법
.parent-class[data-v-f3f3eg9] .child-class { /* ... */ } // 2번째 사용 방법

SCSS 에서 사용하는 방법

.parent-class { // 1번째 사용 방법 : 이 방법은 deprecated 될 예정이라 2번째 사용 방법으로 사용하자
  & /deep/ .child-class {
    background-color: #000;
  }
}
 
.parent-class { // 2번째 사용 방법
  &::v-deep .child-class {
    background-color: #000;
  }
}

참고사이트

• https://stackoverflow.com/questions/48032006/how-do-i-use-deep-or-in-vue-js

How do I use /deep/ or >>> in Vue.js?

• https://github.com/vuejs/vue-cli/issues/3399

dart-sass does not support /deep/ selector · Issue #3399 · vuejs/vue-cli