vue中scope對sass和less的影響，深度作用選擇器 /deep/ (element-ui的樣式改變不了)

前提，我寫了一段css代碼，發現怎么都沒有效果，但是直接在瀏覽器上改卻很明顯

<style  lang="scss" type="text/scss" scoped>
  #details span.ant-input-group-addon{
    width:120px ;
  }
</style>

后來，發現取消了scope就好了，於是仔細去查了下

 

使用 scope 屬性描述 <div> 元素的樣式：

<div>
<style type="text/css" scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>這個標題是紅色的</h1>
<p>這個段落是藍色的。</p>
</div>
scoped 屬性是一個布爾屬性。

如果使用該屬性，則樣式僅僅應用到 style 元素的父元素及其子元素。

原來是使用 scoped 后，父組件的樣式將不會滲透到子組件中。 於是發現vue模板中沒有這個標簽，是其子模板擁有的，后來又去查了些資料，發現 如果scope中需要滲透到子組件中，可以添加 -深度作用選擇器 /deep/，在sass和less中都可以使用

<style  lang="scss" type="text/scss" scoped>
  #details  /deep/ span.ant-input-group-addon{
    width:120px ;
  }
</style>

<style  scoped  type="text/less" lang="less">
  #details {
    /deep/ span.ant-input-group-addon{
      width:120px ;
    }
  }

 

也可以使用 >>>，不過我測試發現只能用在sass中，less報錯

<style  lang="scss" type="text/scss" scoped>
  #details >>>span.ant-input-group-addon{
    width:120px ;
  }
</style>

ps:我也是剛剛學習，如有錯誤，請指出，立即改正