Gandom
Gandom

Reputation: 191

SassError: compound selectors may no longer be extended

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%;
    }
  }
}



Upvotes: 3

Views: 7069

Answers (1)

Jorge Montejo
Jorge Montejo

Reputation: 607

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;
}

Upvotes: 3

Related Questions