Vue3结合SCSS父选择器使用:deep深度选择器报错求助

问题根源 #

你提供的SCSS代码存在语法错误：最后一行多了一个多余的闭合大括号}，导致SCSS编译解析失败。

修正后的代码 #

<style lang="scss" scoped>
:deep(.q) {
  &-badge {
    font-size: 10px;
    padding: 1px 4px;

    &--floating {
      top: -2px;
      right: -2px;
    }
  }
}
</style>

核心修正点 #

• 移除末尾多余的}，修复SCSS语法结构问题
• 保留:deep()的嵌套写法，确保能穿透scoped作用域修改Quasar组件的内部样式类

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