vue scoped scss 의 잘못된 문제 해결

오늘 scoped 내부 의 scss 설정 이 잘못 되 었 습 니 다.해결 방법 은 다음 과 같 습 니 다.
/deep/

<style scoped lang="scss">
.position-el-steps {
 /deep/ .el-step.is-vertical {
 .el-step__description {
  margin-top: -20px;
 }
 
 .el-step__line {
  border-left: 2px dashed #c0c4cc;
  background-color: transparent;
  visibility: visible !important;
 }
 }
}

추가 지식:[vue scoped 스타일 수정]프레임 워 크 나 플러그 인 구성 요소 스타일 변경 및/deep/경고
머리말
vue 프로젝트 를 할 때 많은 사람들 이 vue 구성 요소 에 부 딪 혔 을 것 입 니 다.style 부분 변경 스타일 은 변경 되 지 않 습 니 다.

<!--     B    -->
<template>
 <div>
 <h1 class="my">  B  </h1>
 </div>
</template>

<!-- A   -->
<template>
 <div class="boxA">
 <A/>
 </div>
</template>
<script>
 import A from './a'
 export default {
 name: 'index',
 components:{
 A
 }
 }
</script>
<style scoped>
 /*    scoped        。 */
 /*
           ，      。         ，        B     ，    scoped    ，    。
 .boxA .my {
 color:red;
 }
 */
 .boxA /deep/ .my {
 color:red;
 }
</style>

vue 플러그 인 이나 프레임 내 구성 요소 사용 수정
문법:.자신 이 정의 한 클래스 이름/deep/.구성 요소 내 클래스 이름{/*코드 블록*/}
다음 그림 보기:

구성 요소 스타일 세 가지 방식 수정
다음 예 는 vux 로 하 겠 습 니 다./deep/와>>>vue 에 서 는 선택 기의 선택 속성 이 자동 으로 생 성 됩 니 다.페이지 에 서 는 콘 솔 에[data-v-xxxxx]가 있 는 것 을 볼 수 있 습 니 다.
메모:구 글 에 도 이/딥/중간 선택 기 가 있 습 니 다.그러나 구 글 은 이 를 포기 합 니 다.콘 솔 에 아래 그림 의 경고 가 나타 나 면 잘못 썼 다 는 것 을 증명 합 니 다./딥/https://www.chromestatus.com/features/4964279606312960을 많이 썼 습 니 다.
경고

솔 루 션:페이지 에서 찾 아 보면 됩 니 다.vue 렌 더 링 을 이용 하여 모든 것 을 콘 솔 에서 볼 수 있 습 니 다.

첫 번 째:사용/deep/
추천했어아래 의 예 를 보시오.메모:카 스 와 less 를 사용 하면/deep/이 방법 만 사용 할 수 있 습 니 다.

<template>
 <div class="box-out">
 <step v-model="step1" background-color='#fbf9fe'>
  <step-item title="   " description="step 1"></step-item>
  <step-item title="   " description="step 2"></step-item>
  <step-item title="   " description="step 3"></step-item>
 </step>
 </div>
</template>

<script>
import { Step, StepItem, XButton, XHr } from 'vux'
export default {
 name: 'box',
 data () {
 return {
  step1: 1,
  step2: 0
 }
 },components: {
  Step,
  StepItem,
  XButton,
  XHr
 }
}
</script>

<style scoped>
 /*
     
      box-out  class ，        class ，        /deep/        class 。
 */
 .box-out /deep/ .xxxxx      {
 color: red;
 }
</style>

방법 2:사용>>
이 세 개의 큰 번 호 를 사용 하면 위의/deep/와 차이 가 많 지 않 습 니 다.

<template>
 <div class="box-out">
 <step v-model="step1" background-color='#fbf9fe'>
  <step-item title="   " description="step 1"></step-item>
  <step-item title="   " description="step 2"></step-item>
  <step-item title="   " description="step 3"></step-item>
 </step>
 </div>
</template>

<script>
import { Step, StepItem, XButton, XHr } from 'vux'
export default {
 name: 'box',
 data () {
 return {
  step1: 1,
  step2: 0
 }
 },components: {
  Step,
  StepItem,
  XButton,
  XHr
 }
}
</script>

<style scoped>
 /*
     
      box-out  class ，        class ，        >>>        class 。
 */
 .box-out >>> .xxxxx      {
 color: red;
 }
</style>

방법 3:전역 스타일 시트 사용(추천 하지 않 음)
앞의 두 가지 방식 은 모두 부분 적 인(추천)이 고 전체 스타일 시트 를 통 해 바 꿀 수 있 습 니 다.물론 밖 에 네 임 스페이스 를 추가 하 는 것 을 기억 합 니 다(css 의 네 임 스페이스 를 모 르 면 자체 바 이 두).이 추천 하지 않 는 것 은 사람 에 게 달 려 있다.업무 수요 에 따라 추가 수정 을 할 수 있 기 를 바 랍 니 다.

<!--    ，       ，       app.vue        。       app.vue   -->
<template>
 <div id="app">
 <router-view/>
 </div>
</template>

<script>
export default {
 name: 'App'
}

</script>

<style>
/*      scoped   ，       */ 
.box-out .xxxxx      {
 color: red;
 }
</style>

다른 기 교 를 말씀 드 리 겠 습 니 다.
브 라 우 저 에서 현재 vue 구성 요소 속성[data-v-xxxxx]을 볼 수 있다 면 직접 가 져 와 서 사용 할 수 있 습 니 다.벽 은 아래 와 같 습 니 다.

이상 vue scoped scss 의 무효 문 제 를 해결 하 는 것 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.