Bootstrap 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)

Answer 1

试试这个：-

npm rebuild node-sass

Answer 2

没有必要使用node-sass。这个问题通常是你的 sass 变量有问题，如下所示：

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

在密钥中添加引号即可解决问题

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

Bootstrap angular 更新后 SCSS 错误

Bootstrap SCSS error after angular update

twitter-bootstrap

angular-cli

ng-bootstrap

angular

angular-devkit