css - @extend 不适用于不同浏览器的拇指伪类

Question

我想为不同的浏览器编写类似的规则，以确保愤怒输入中拇指的样式在所有主要浏览器中都相同。但是当我声明一个类然后在这些伪类中使用@extend 时，什么也没有发生！

但是当我为每个伪类写 3 次相同的样式时，它工作正常！问题出在哪里，为什么？（注意：我在一个 react 项目的 webpack 中使用 node-sass 和 sass-loader）

这是示例代码：

.commonClass {
  background-color: var(--color-secondary-500);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 2rem;
  width: 2rem;
  margin-top: 0.4rem;
  pointer-events: all;
  position: relative;
}

.thumb {
  pointer-events: none;
  height: 0;
  outline: none;
  -webkit-appearance: none;

  /* For Chrome browsers */
  &::-webkit-slider-thumb {
    @extend .commonClass;
    -webkit-appearance: none;
  }

  /* For Firefox browsers */
  &::-moz-range-thumb {
    @extend .commonClass;
  }

  /* For IE */
  &::-ms-thumb {
    @extend .commonClass;
  }
}