Bootstrap SCSS error after angular update

Question

I have recently upgraded my project from angular version 7 to 8. But when I issue command npm start I am seeing a lot of warnings like the following related with Bootstrap.

WARNING: You probably don't mean to use the color value gray in interpolation here.
It may end up represented as gray, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "gray").
If you really want to use the color value here, use '"" + $color'.

   ╷
48 │   .alert-#{$color} {
   │            ^^^^^^
   ╵
    node_modules/bootstrap/scss/_alert.scss 48:12  @import
    src/scss/bootstrap.scss 46:9                   @import
    src/scss/theme/application.scss 18:9           @import
    stdin 1:9                                      root stylesheet

After this the compilation is failing with following error message

ERROR in ./src/scss/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--13-3!./src/scss/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    @extend .input-no-border:focus;
           ^
      Compound selectors may no longer be extended.
Consider `@extend .input-no-border, :focus` instead.
See https://sass-lang.com/documentation#extending_compound_selectors for details.

    ╷
209 │     @extend .input-no-border:focus;
    │             ^^^^^^^^^^^^^^^^^^^^^^
    ╵
  src/scss/theme/_utils.scss 209:13  root stylesheet
      in /src/scss/theme/_utils.scss (line 209, column 13)

Answer 1

try this:-

npm rebuild node-sass

Answer 2

it's not necessary to use node-sass. This problem is usually you have a problem with your sass variables like this :

$theme-color: (
  primary: #ababab,
  secondary: #gegege,
)

adding quote to the key will solve the problem

$theme-color: (
  'primary': #ababab,
  'secondary': #gegege,
)