如何将Vue3的::v-deep SASS语法转换为使用:deep？

先明确你原始SASS代码的逻辑：给.form下的.source-field做样式穿透，原始写法是：

.form::v-deep .source-field {
  width: 129px;
  display: inline-block;
  margin: 0px 2px 5px 2px;
}

你之前的错误写法是把父选择器.form放到了:deep()里，不符合Vue3的:deep()语法规则。正确的转换方式有两种：

方式一：匹配原始作用范围的写法 #

这是和原始.form::v-deep .source-field完全等价的写法，仅作用于.form容器内的.source-field元素：

.form :deep(.source-field) {
  width: 129px;
  display: inline-block;
  margin: 0px 2px 5px 2px;
}

方式二：全局穿透写法（和你有效的::v-deep .source-field等价） #

如果不需要限定在.form下，仅全局穿透.source-field，正确的:deep()写法是：

:deep(.source-field) {
  width: 129px;
  display: inline-block;
  margin: 0px 2px 5px 2px;
}

你之前写的:deep() .source-field属于语法错误，必须将目标选择器放在:deep()的括号内。

核心语法差异 #

• Vue2的::v-deep可作为伪元素后缀在父选择器后，直接跟随子选择器；
• Vue3的:deep()是函数式选择器，需将需要穿透的目标选择器包裹在括号内，结合父选择器时，父选择器要写在:deep()外部。

内容的提问来源于stack exchange，提问作者geoidesic