【Scss】＞＞＞ 或 /deep/ 或 ::v-deep 的作用

>>>

• 引入第三方组件后，如果需要局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染，这时候就可以用>>>穿透scoped了
• 如果vue的style使用的是css，那么则：

<style scoped lang="css">
.menuItem {
	>>> .ant-input {
      border-radius: 50px;
      font-size: 14px;
      height: 30px;
    }
}
style>
1
2
3
4
5
6
7
8
9

/deep/

• 但是像scss等预处理器却无法解析>>>，这时候我们可以使用下面的方式.

<style scoped lang="scss">
.menuItem {
	/deep/ .ant-input {
      border-radius: 50px;
      font-size: 14px;
      height: 30px;
    }
}
style>
1
2
3
4
5
6
7
8
9

::v-deep

• 但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告,这时候我们可以使用下面的方式.

<style scoped lang="scss">
.menuItem {
	::v-deep .ant-input {
      border-radius: 50px;
      font-size: 14px;
      height: 30px;
    }
}
style>
1
2
3
4
5
6
7
8
9