Module build failed (from ./node_modules/sass-loader/lib/loader.js), Compound selectors may no longer be extended

user_4995016 0
Viewed 629

I am getting this error when I try to run "npm start" or "ng serve". I am using node version v11.15.0, npm version 6.7.0.

ERROR in ./src/app/shared/components/pop-up/pop-up.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
                    @extend button.mat-button.default-button;
                           ^
      Compound selectors may no longer be extended.
Consider `@extend button, .mat-button, .default-button` instead.
    ╷
116 │                     @extend button.mat-button.default-button;
    │                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  stdin 116:29  root stylesheet
      in xyz/src/app/shared/components/pop-up/pop-up.component.scss (line 116, column 29)
ERROR in ./src/app/core/authentication/login/login.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
            @extend button.mat-button.default-button;
                   ^
      Compound selectors may no longer be extended.
Consider `@extend button, .mat-button, .default-button` instead.
   ╷
59 │             @extend button.mat-button.default-button;
   │                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  stdin 59:21  root stylesheet
      in xyz/src/app/core/authentication/login/login.component.scss (line 59, column 21)
ERROR in ./src/app/modules/abc/components/scan-input/scan-input.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
:host /deep/ .mat-radio-label {
     ^
      Expected selector.
   ╷
43 │ :host /deep/ .mat-radio-label{
   │       ^
   ╵
  stdin 43:7  root stylesheet
      in xyz/src/app/modules/abc/components/scan-input/scan-input.component.scss (line 43, column 7)
ℹ ｢wdm｣: Failed to compile.

I also tried few solutions like -

npm rebuild node-sass
npm install --save-dev  --unsafe-perm node-sass
npm install node-sass

but unfortunately none of them worked in my favor. I need help in resolving this issue.

angular webpack node.js sass javascript
1 Answers

I myself tried one solution, and it's working perfectly. The way of handling the above styling has changed. So, Instead of

@extend button.mat-button.default-button;

It will be written as

@extend button, .mat-button, .default-button;

This solution worked.

user_49950160
Related