"Compound selectors may no longer be extended" error being thrown when running "ng serve."

Question

While trying to ng serve I keep getting the same error message.

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

                @extend i.skinny_arrow;
                       ^
      Compound selectors may no longer be extended.
Consider "@extend i, .skinny_arrow" instead.
See https://sass-lang.com/documentation/at-rules/extend#disallowed-selectors for details.

I have tried using npm rebuild node-sass because it seems to be a sass issue of some kind but rebuilding it did nothing. Things to note are that three people (one who is running linux and two who are running macOS) are able to run the same code without any issue. However, I'm running windows and it refuses to work. Also I'm running node-sass version 4.13.1 and libsass version 3.5.4.

Nope. I've had to just rip out all things that used @extend and tried to find another solution. That seems to be the only way to fix it. — Help_gotaprob, Feb 05 '20 at 19:53

score 0 · Answer 1 · answered Aug 05 '21 at 06:48

0

The way of handling this has changed. So, Instead of

@extend i.skinny_arrow;

You do

@extend i, .skinny_arrow

That should work.

answered Aug 05 '21 at 06:48

sajalsuraj

922
15
29

`@extend i.skinny_arrow` is not the same as `@extend i, .skinny_arrow` – Larry Williamson Dec 05 '22 at 03:25

score 0 · Answer 2 · answered Jan 20 '23 at 10:58

I guess this will help someone from original docs

Because Sass doesn’t know the details of the HTML the CSS is going to style, any @extend might need to generate extra selectors that won’t apply to your HTML in particular. This is especially true when switching away from extending compound selectors.

Most of the time, these extra selectors won’t cause any problems, and will only add a couple of extra bytes to gzipped CSS. But some stylesheets might be relying more heavily on the old behavior. In that case, we recommend replacing the compound selector with a placeholder selector.

// Instead of just `.message.info`.
%message-info, .message.info {
  border: 1px solid black;
  font-size: 1.5rem;
}

.heads-up {
  // Instead of `.message.info`.
  @extend %message-info;
}

Do check the link above

"Compound selectors may no longer be extended" error being thrown when running "ng serve."

2 Answers2