SassError：复合选择器可能不再被扩展

Question

当我运行 npm start 时，我在我的 react 应用程序中遇到了这个错误。我正在使用 node : v14.17.6 & npm: 6.14.9

编译失败。

./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss! ./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--5-oneOf- 6-4!./src/index.scss) SassError：复合选择器可能不再被扩展。 请考虑使用@extend .dropdown-item, .active。 详情请见https://sass-lang.com/documentation/at-rules/extend#disallowed-selectors。

╷ 16 │ @extend .dropdown-item.active; │ ^^^^^^^^^^^^^^^^^^^^^ ╵ src\assets\scss\bootstrap_typeaheadjs.scss 16:13 根样式表

这是 _typeaheadjs.scss 内容

span.twitter-typeahead {
  width: 100%;

  .tt-menu {
    @extend .dropdown-menu;
    width: 100%;
  }

  .tt-suggestion {
    @extend .dropdown-item;
    font-size: 14px;
  }

  .tt-suggestion.tt-cursor {
    @extend .dropdown-item.active;
  }

  .input-group & {
    display: flex !important;
    align-items: center;
    position: relative;
    flex: 1 1 auto;
    width: 1%;

    .tt-menu, .tt-hint, .tt-input {
      width: 100%;
    }
  }
}

Answer 1

Official docs:

@extend 的定义表明匹配扩展器的元素将被设置为就好像它们匹配 .message.info 一样。这与匹配 .message 和 .info 是一样的，所以写它而不是 @extend .message, .info 不会有任何好处。

.tt-suggestion.tt-cursor {
  @extend .dropdown-item, active;
}