뷰 라우터를 통해 로드된 컴포넌트에 Vue.js 스코프 스타일을 적용하는 방법

뷰 라우터를 통해 로드된 컴포넌트에 Vue.js 스코프 스타일을 적용하는 방법

Vue.js 스코프 스타일을 로딩된 컴포넌트에 적용하려면<view-router>.

코드는 다음과 같습니다.

<template>
  <div id="admin">
    <router-view></router-view>
  </div>
</template>

<style lang="scss" scoped>
#admin {
  .actions {
    display: none;
    span {
      cursor: pointer;
    }
  }
}
</style>

제가 방문했을 때/posts라고 하는 성분Posts로딩됩니다.이 컴포넌트 안에는

<div class="actions">
  some content
</div>

문제는 에 정의된 스타일이#admin에 적용되지 않습니다..action요소.스코프가 설정되어 있지 않은 경우는, 정상적으로 동작합니다.문제가 발생하는 것은,#admin컴포넌트 스타일링은scoped.

이 모든 것을 보관하면서.actions내부 스타일admin컴포넌트 범위 스타일 태그

https://vue-loader.vuejs.org/en/features/scoped-css.html#deep-selectors 를 이용하실 수 있습니다.

코드 스니펫은 SCSS를 사용하기 때문에 /deep/combinator를 사용해야 합니다.

---

자 컴포넌트에 영향을 주는 등 스코프 스타일의 셀렉터를 「깊이」로 하고 싶은 경우는, 다음의 조합기를 사용할 수 있습니다.

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

위의 내용은 다음과 같이 정리됩니다.

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

SAS 등의 일부 프리프로세서에서는 >>>를 올바르게 해석할 수 없는 경우가 있습니다.이 경우, /deep/combinator 를 대신 사용할 수 있습니다.이것은 >> 의 에일리어스로 동작합니다.

---

그러면 다음과 같은 결과가 됩니다.

<style lang="scss" scoped>
  #admin {
    some-property: some-style;

    /deep/ .actions {
      some-property: some-style;
    }
  }
</style>

스타일을 별도의 파일에 넣고 필요한 모든 구성요소에서 참조할 수 있습니다.

<style src="path/to/your/styles" lang="scss" scoped></style>

이유router-view태그가 스타일을 아이에게 전달하지 않는 이유는router-view그 자체는 스타일링 가능한 html 태그가 아니므로 스타일을 적용할 수 없습니다.시도할 수 있지만 렌더링되지 않습니다.

이유:router-view기본적으로는 템플릿태그 또는 Vue의 플레이스 홀더입니다.component또는View그 루트에 대해 호출됩니다.그 결과,router-view태그는 컴파일된 마크업에는 표시되지 않습니다.표시되는 것은,View또는Component로딩되고 있습니다.

앱 엔트리 포인트가 Vue App에서 index.html 파일로 동작하는 것과 같은 방식으로 동작합니다.적어도 그것은 나의 경험과 지식이다.

또한 @Antonio Trapani의 좋은 답변입니다.여러 컴포넌트에 필요한 모든 글로벌 스타일 또는 스타일을 포함하는 scs 파일까지 포함할 수 있습니다.그러면 스타일을 @import 할 수 있습니다.App.vue앱 전체에 액세스 할 수 있습니다.그리고 IME.

이게 도움이 됐으면 좋겠네요.건배.

언급URL : https://stackoverflow.com/questions/46140062/how-to-apply-vue-js-scoped-styles-to-components-loaded-via-view-router