Vue style 深度作用選擇器 >>> 與 /deep/（sass/less）

傳送門：https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html

 

你很可能會遇到的問題

vue組件編譯后，會將 template 中的每個元素加入 [data-v-xxxx] 屬性來確保 style scoped 僅本組件的元素而不會污染全局，但如果你引用了第三方組件：

默認只會對組件的最外層（div）加入這個 [data-v-xxxx] 屬性，但第二層開始就沒有效果了。如圖所示： 第一層還有 data-v-17bb9a05, 但第二層的 .weui-cells 就沒有了。

（這是 <group />組件的源碼： https://github.com/airyland/vux/blob/v2/src/components/group/index.vue ）

 

所以，如果你期待通過如下方式修改 weui-cells 的樣式。是沒有任何效果的：

<style scoped>
    .fuck .weui-cells {
        // ...
    }
</style>

 

這是因為，所有的scoped中的css最終編譯出來都會變成這樣：

.fuck[data-v-17bb9a05] .weui-cells[data-v-17bb9a05]

 

解決方法一：除非你將 scoped 移除，或者新建一個沒有 scoped 的 style（一個.vue文件允許多個style）

<style scoped>
    .fuck {
        // ...
    }
</style>

<style>
    .fuck .weui-cells {
        // ...
    }
</style>

 

解決方法二：深度作用選擇器 >>>  

（注意，只作用於css）

.fuck >>> .weui-cells {
    // ...
}

但如果是sass/less的話可能無法識別，這時候需要使用 /deep/ 選擇器。

<style lang="scss" scoped>
.select {
  width: 100px;

  /deep/ .el-input__inner {
    border: 0;
    color: #000;
  }
}
</style>