Vue.js + Sass로 scoped의 style로 import 한 파일을 deep 에 의해 아이 컴퍼넌트에 효용시킨다
scoped 부모 컴퍼넌트의 style 로 import 한 파일을 자식 컴퍼넌트에 적용시키고 싶다
Vuejs에서 컴포넌트의 CSS를 부모 컴포넌트에서 변경하고 싶다면 deep selector를 사용합시다. 등의 기사에서deep
셀렉터를 사용하면 scoped
지정의 부모 컴퍼넌트의 style
정의가 아이 컴퍼넌트에도 반영되면(자) 그것을 참조에・・・ /deep/
부하에서 @import
red-parent<style lang="sass" scoped>
/deep/
@import "~/static/red.sass"
</style>
red-child<template lang="pug">
.page Red Child
span span
</template>
<style lang="sass" scoped>
.page
background: green
</style>
red.sassspan
background: red
span
에는 red.sass
로 정의한 background: red
이 적용되고 있어・・・
red-parent.vue:18
의 링크처에서는 전술의 /deep/
부하에서의 @import
가 반영되고 있었습니다.
이것은 lang="scss"
하지만 할 수 있을까···?
SCSS라도 할 수 있을 것 같다・・・하지만・・・
Scope Bootstrap Css in Vue - StackOverflow
BUT, I gotta say, importing the entire Bootstrap CSS is a really bad practice. Try to import only and exactly what you are going to use from bootstrap-sass instead.
This solution is hacky. But it's the only way I know that can work for your use case.
거친
그러나 Bootstrap CSS를 매번 import하는 것은 bad practice입니다.
당신이 정말로 import하고 싶은 것을 bootstrap-sass 쪽으로 한정해야 한다
hacky 만 어디 밖에 해결 방법이 없는 것 같다
음, 어쨌든 컴포넌트로 나뉘는데 나눈 곳에서 어딘지 모르는 것은 오카시이데스요네
Reference
이 문제에 관하여(Vue.js + Sass로 scoped의 style로 import 한 파일을 deep 에 의해 아이 컴퍼넌트에 효용시킨다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ysKuga/items/c9597a03815002a1dd39
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<style lang="sass" scoped>
/deep/
@import "~/static/red.sass"
</style>
<template lang="pug">
.page Red Child
span span
</template>
<style lang="sass" scoped>
.page
background: green
</style>
span
background: red
Reference
이 문제에 관하여(Vue.js + Sass로 scoped의 style로 import 한 파일을 deep 에 의해 아이 컴퍼넌트에 효용시킨다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ysKuga/items/c9597a03815002a1dd39텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)