Angular更新后，使用Bootstrap 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)

- Happy Coder

---

代码，你能否请添加angular.json的代码。 - Jayoti Parkash

Answer 1

试试这个：

npm rebuild node-sass

- Ronak Khangaonkar

---

“node-sass”的使用已过时，将在未来的主要版本中被移除。因此，随着Angular的进步，我需要卸载“node-sass”。那么我该如何解决这个问题呢？ - Huantao

@Huantao，你找到解决方案了吗？因为node-sass已经被弃用了。 - Ankit

Answer 2

不一定需要使用node-sass。通常这个问题是由于sass变量出现问题造成的，例如：

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

给键添加引号将解决问题。

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

- Huantao