Vue.js 2: sass/scss에서 사용할 수 없는 범위 스타일

Vue.js 2: sass/scss에서 사용할 수 없는 범위 스타일

Vue.js 컴포넌트에서 스타일을 "scope"로 설정하면 스타일은 무시됩니다.

<style lang="sass" scoped>

콘솔에 다음 오류가 나타납니다.

[HMR] unexpected require(609) to disposed module

"scope" 속성을 추가하지 않으면 예상대로 작동합니다.

내 의견을 답변으로 변환합니다.

범위 지정 스타일을 사용하는 경우 Vue가 추가합니다.data컴포넌트 내의 모든 태그에 고유한 값을 가진 Atribute를 사용하여 CSS/SASS 실렉터를 사일런트하게 변경합니다.data기여하다.

예를들면,.list-container:hover된다.list-container[data-v-21e5b78]:hover

딥 셀렉터가 필요한 경우(즉, 하위 구성요소에 영향을 미치는 경우) 조합기를 사용할 수 있습니다.

<style scoped>
.a >>> .b { /* ... */ }
</style>

로 정리될 것이다.

.a[data-v-f3f3eg9] .b { /* ... */ }

SAS가 해석할 수 없는 경우>>>콤비네이터로 대체할 수 있습니다./deep/대신.

콤비네이터를 사용하지 않으면

<style scoped>
.a > .b { /* ... */ }
</style>

로 정리될 것이다.

.a > .b[data-v-f3f3eg9] { /* ... */ }

를 사용할 수 있습니다.::v-deep조합기를 사용하면 하위 구성요소의 범위 지정 스타일을 대상으로 지정할 수 있습니다.

예제:

<template>
  <main class="content">
    <child-component></child-component>
  </main>
</template>

이 경우 단락의 색상을 변경하려면<p>하위 구성 요소에서 다음을 사용하여 수행할 수 있는 작업:

.content ::v-deep p {
  color: red;
}

언급URL : https://stackoverflow.com/questions/51470954/vue-js-2-scoped-style-not-working-with-sass-scss