vuejs / rfcs

RFCs for substantial changes / feature additions to Vue core

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nested scss styles on child component with ::v-deep

fotouhi-mostafa opened this issue · comments

Hi , I used ::v-deep in my code for child component styling . when I did want to styling for nested classes , gave me an error . for example :

&::v-deep(.label) {
    right: 3rem;

    small {
      color: var(--color-text-light);
    }
    &--active small {
      color: var(--color-primary);
    }
  }

Syntax Error: SassError: Invalid parent selector "::v-deep(.label)"

-->   &--active small {...}

嗨,我在我的代码中使用 ::v-deep 进行子组件样式。当我确实想要为嵌套类设置样式时,给了我一个错误。例如 :

&::v-deep(.label) {
    right: 3rem;

    small {
      color: var(--color-text-light);
    }
    &--active small {
      color: var(--color-primary);
    }
  }

语法错误:SassError:无效的父选择器“::v-deep(.label)”

-->   &--active small {...}

Hey, can this try to solve it

 :deep(.el-input__inner),
  :deep(.el-button) {
    border-radius: 0.3rem;
  }

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.