Vue.js에서 /deep/ 또는 >> 또는 ::v-deep을 어떻게 사용합니까?

Vue.js에서 /deep/ 또는 >> 또는 ::v-deep을 어떻게 사용합니까?

그래서 Vue.js에서 사용할 수 있다는 것을 여기에서 읽었습니다./deep/아니면>>>선택기에서 하위 구성요소 내부의 요소에 적용되는 스타일 규칙을 만듭니다.그러나 SCSS든 오래된 CSS든 내 스타일에서 이것을 사용하려고 시도하는 것은 효과가 없습니다.대신 브라우저 버바텀으로 전송되므로 아무런 효과가 없습니다.예를 들어,

home.vue:

<style lang="css" scoped>
.autocomplete >>> .autocomplete-input 
{
// ...
}
</style>

생성된 CSS:

<style type="text/css">
.autocomplete >>> .autocomplete-input[data-v-2bda0c9a]
{
//...
}
</style>

내가 원하는 것:

<style type="text/css">
.autocomplete[data-v-2bda0c9a] .autocomplete-input
{
//...
}
</style>

다음과 관련된 내 웹 팩 구성vue-loader다음과 같습니다.

// ...
{
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
        loaders: {
            scss: "vue-style-loader!css-loader!sass-loader"
        }
    }
}
// ...

그래서 제 질문은 이걸 어떻게 얻느냐는 겁니다.>>>오퍼레이터가 일을 합니까?

이미 이 답을 찾았지만, 정확히 그렇게 하고 있는데도 효과가 없어요.

Vue 2.0 - 2.6

^{다음은 Vue 3에서도 작동하지만 사용하지 않습니다.}

Sass: 사용::v-deep

::v-deep .child-class {
    background-color: #000;
}

Sass 사용 안 함: 사용>>>

>>> .child-class {
    background-color: #000;
}

두 가지 구문 중 하나를 사용하면<style>이 구성 요소에 대한 태그는 다음과 같아야 합니다.scoped:

<style scoped>

---

Vue 3 (및 Vue 2.7)

Vue 3에서.::v-접두사는 이제 더 이상 사용되지 않으므로 더 이상 필요하지 않습니다.>>>. Unified 를 사용하면 됩니다.:deepSass를 사용할지 여부를 선택합니다. 하지만 이제 선택기와 함께 괄호를 사용하는 것이 좋습니다.

사용하다:deep(.child-class)

:deep(.child-class) {
    background-color: #000;
}

^{이는 Vue 2.7(최종 Vue 2 릴리스)에서도 작동합니다.}

---

Vue 3 신규 셀렉터

또한 Vue 3에는 다음과 같은 기능을 가진 컴포넌트에 대한 새로운 기능이 있습니다.<slot>통과된 슬롯 컨텐츠를 스타일링 할 수 있습니다.

슬롯 컨텐츠 사용:slotted(.child-class)

:slotted(.slot-class) {
    background-color: #000;
}

그리고 마지막으로 Vue 3에서는 글로벌 스타일을 등록할 수 있는 새로운 기능이 있습니다.scoped구성요소:

전역 스타일 사용:global(.my-class)

:global(.my-class) {
    background-color: #000;
}

어떤 구문을 사용해도<style>이 구성 요소에 대한 태그는 다음과 같아야 합니다.scoped:

<style scoped>

---

요약

Vue 2에서:

• 그/deep/구문이 더 이상 사용되지 않습니다.
• 사용하다::v-deepSass와 함께 사용>>>새스 없이

Vue 3에서:

• ::v-deep .child-class을 위해 감가상각됩니다.:deep(.child-class)
• 그::v-접두사는 다음을 위해 더 이상 사용되지 않습니다.:
• 그>>>구문이 더 이상 사용되지 않습니다.
• 그/deep/구문이 더 이상 사용되지 않습니다.
• 새로운 것이 있습니다.:slotted그리고.:global셀렉터들

모든 버전/구문과 함께,<style>이 구성 요소에 대한 태그는 다음과 같아야 합니다.scoped:

<style scoped>

사용을 피함/deep/대신 사용합니다.::v-deep

모든 범위component'sCSS는 다음을 사용하여 변경할 수 있습니다.deep selector하지만 좀더 일찍/deep/감가상각됩니다

Vue Github 참조 - https://github.com/vuejs/vue-loader/issues/913

사용하다 ::v-deep이 경우, 그리고 감가상각되는 것을 방지합니다./deep/

기준 - 심층 선택기

렌더링된 클래스를 검사하기만 하면 됩니다.element사용하여 수정할 대상devtools크롬 또는 모든 브라우저 콘솔에서 사용할 수 있습니다.

그럼, 당신이 소비하는 중에component, 수정.

<style scoped>
::v-deep .custom-component-class {
   background: red; //
}
</style>

Vue의 범위가 지정된 SCSS 스타일시트에 다음과 같은 구조로 /deep/을 성공적으로 사용했습니다.

.parent-class {
  & /deep/ .child-class {
    background-color: #000;
  }
}

편집: /deep/이(가) 더 이상 작동하지 않는 경우:v-deep을(를) 설명하는 다른 답변을 참조하십시오.

:: v-deep을 콤비네이터로 사용하는 것이 더 이상 사용되지 않습니다.대신 :deep()을 사용합니다.

:deep(.child-class) {
    background-color: #000;
}

제게 있어 유일하게 효과가 있었던 것은

<style scoped>.  // sass and scss didn't work
  >>> .deep-selector {
    ...
  }
</style>

설명서에서 찾을 수 없지만 사용자가 도달하려는 구성요소는 루트 구성요소가 될 수 없습니다.단일 구성요소를 a로 감습니다.<div>그리고 그것은 작동할 것입니다.::v-deep일정한 범위 내에서scss다른 사람들이 설명한 바와 같이

나는 이 문제를 추가해서 해결했습니다.

options: { styleIsolation: 'shared' }, // add this
methods: {
  yourFunc1 () {
  }
}

.pet-info{
  ::v-deep .title {
    width: 51px !important;
    background-color: red !important
  }
}

이것을 메소드와 같은 구성 요소로 구성하면 메소드와 같은 레벨이 됩니다.

언급URL : https://stackoverflow.com/questions/48032006/how-do-i-use-deep-or-or-v-deep-in-vue-js