角度更新后的引导 SCSS 错误

Posted 2023-03-15

【中文标题】角度更新后的引导 SCSS 错误

【英文标题】：Bootstrap SCSS error after angular update

【发布时间】：2019-10-29 15:13:45

【问题描述】：

我最近将我的项目从 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)

【问题讨论】：

代码你能添加angular.json的代码吗。

【参考方案1】：

试试这个：-

npm rebuild node-sass

【讨论】：

'node-sass' 的用法已被弃用，并将在未来的主要版本中删除。所以随着 Angular 的发展，我需要卸载 node-sass。那我应该怎么解决这个问题呢？

@Huantao 随着node-sass的贬值，你找到解决问题的方法了吗

【参考方案2】：

没有必要使用 node-sass。 这个问题通常是你的 sass 变量有这样的问题：

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

在键中添加引号将解决问题

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