scss使用/deep/深度选择器报错的解决办法

scss中使用/deep/深度选择器报错

需求 ： 在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错。

错误代码：

<style lang="scss" scoped>
 	/* 这种写法就会报错 */
 	/* 原因：>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/,因此报错*/
	/deep/ .el-menu .el-menu-item {
	  background-color: #000!important;
	}
</style>

解决方案：

/* 采用:;v-deep就可以解决上述问题 */
<style lang="scss" scoped>
::v-deep .el-menu .el-menu-item {
  background-color: #000!important;
}
</style>

总结

在vue中，>>>是深度选择器，可以作用到子组件中的样式，/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep

这篇好文章是转载于：编程之路