vue中出現(xiàn)scoped內(nèi)部scss設(shè)置無效怎么解決

<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;
 }
 }
}

<!-- 這個是 B 組件 -->
<template>
 <div>
 <h2 class="my">我是B組件</h2>
 </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 更改的組件樣式。 */
 /*
 此處只是舉個栗子使用，沒有經(jīng)過驗證。很多人會下面這摸寫，但是發(fā)現(xiàn)改變不了B組件的樣式，其實是 scoped 局部的，所以不能。
 .boxA .my {
 color:red;
 }
 */
 .boxA /deep/ .my {
 color:red;
 }
</style>

<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類，找到下面組件內(nèi)的class類，中間必須得使用 /deep/ 才能找到下面的class類。
 */
 .box-out /deep/ .xxxxx組件樣式類 {
 color: red;
 }
</style>

<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類，找到下面組件內(nèi)的class類，中間必須得使用 >>> 才能找到下面的class類。
 */
 .box-out >>> .xxxxx組件樣式類 {
 color: red;
 }
</style>

<!-- 情況下，引入全局得樣式，或者是直接在 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>