Reputation: 191
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
Reputation: 607
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