SassError: compound selectors may no longer be extended

Question

I face this error in my react app when I run npm start..I'm using node : v14.17.6 & npm: 6.14.9

Failed to compile.

./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: compound selectors may no longer be extended. Consider @extend .dropdown-item, .active instead. See https://sass-lang.com/documentation/at-rules/extend#disallowed-selectors for details.

╷ 16 │ @extend .dropdown-item.active; │ ^^^^^^^^^^^^^^^^^^^^^ ╵ src\assets\scss\bootstrap_typeaheadjs.scss 16:13 root stylesheet

This is _typeaheadjs.scss content

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:

The definition of @extend says that elements matching the extender would be styled as though they matched .message.info. That’s just the same as matching both .message and .info, so there wouldn’t be any benefit in writing that instead of @extend .message, .info.

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