angular - 角度更新後のブートストラップ SCSS エラー

Question

最近、プロジェクトを angular バージョン 7 から 8 にアップグレードしました。しかし、コマンドを発行npm startすると、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

この後、コンパイルは次のエラーメッセージで失敗します

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)