Angular 编译器警告 Bootstrap

Question

我在 Angular11 应用程序中看到很多关于 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 '"" + $state'.

  ╷
4 │   .list-group-item-#{$state} {
  │                      ^^^^^^
  ╵
    node_modules/bootstrap/scss/mixins/_list-group.scss 4:22  list-group-item-variant()
    node_modules/bootstrap/scss/_list-group.scss 148:3        @import
    node_modules/bootstrap/scss/bootstrap.scss 35:9           @import
    src/app/scss/application.scss 4:9                         root stylesheet

Bootstrap 导入

 "bootstrap": "^4.3.1",

如果我能修复/静音这些就太好了。有人可以帮忙吗？

Answer 1

我遇到了同样的问题。在讨论 here on github 之后，当我在我的 sass-map 上加上双引号时，我的问题就解决了。

我不知道你的 application.scss 长什么样，但也许你也有一张 sass 地图，看起来像这样:

$...-colors: (
    ...
    gray: $gray,
    ...
);

改为：

$...-colors: (
    ...
    "gray": $gray,
    ...
);

您还可以查看 sass documentation 以获得更多帮助

Angular 编译器警告 Bootstrap

Angular compiler warnings with Bootstrap

angular-ui-bootstrap

bootstrap-4