Vue.js + Sass로 scoped의 style로 import 한 파일을 deep 에 의해 아이 컴퍼넌트에 효용시킨다

3108 단어 SassVue.js

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.sass
span
  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 만 어디 밖에 해결 방법이 없는 것 같다

음, 어쨌든 컴포넌트로 나뉘는데 나눈 곳에서 어딘지 모르는 것은 오카시이데스요네

좋은 웹페이지 즐겨찾기