SCSS 颜色变量无法在 Angular 组件中编译答案

【问题标题】：SCSS color variable failing to compile in Angular componentSCSS 颜色变量无法在 Angular 组件中编译
【发布时间】：2020-03-29 14:12:04
【问题描述】：

我不知所措，我一定是错过了什么。这很简单。这是引用 scss 文件的角度组件：

@Component({
    selector: 'base-table',
    templateUrl: './html/base.table.html',
    styleUrls: ['./scss/base.table.scss']
})

这里是 scss（简化版）不工作的部分：

$orange: #ED7000;
#table-hscroll {
    --scrollbar-thumb-color: $orange;
}

如果我不使用该变量，一切正常。一旦我使用变量，颜色就会消失。我已经在 Angular cli 中指定了 scss，并假设在直接从组件访问它时它会被正确编译，但情况似乎并非如此。

"schematics": {
    "@schematics/angular:component": {
      "styleext": "scss"
    }
  }

当直接从组件引用时，我不知道 scss 是如何工作的。我的文件没有被编译吗？

【问题讨论】：

【解决方案1】：

像这样使用它：

$orange: #ED7000;

#table-hscroll {
    --scrollbar-thumb-color: #{$orange};
}

【讨论】：

【解决方案2】：

如果您的变量不是直接在组件 scss 中而是在全局样式表中，您必须在组件的样式表中导入该全局样式表。如果所有组件都有单独的样式表，则需要对它们执行此操作。

所以在./scss/base.table.scss' 中导入包含您的变量的样式表。

【讨论】：

但是变量在组件scss中。当我在浏览器中检查时，它看起来像这样 --scrollbar-thumb-color: $orange;。所以它根本不编译scss。我最终会将所有这些全球移动，但我试图让最简单的事情先发挥作用。
你试过不使用css变量吗？例如只是scrollbar-thumb-color: $orange;
是的。如果我只使用 css，它工作正常。 scrollbar-thumb-color: #ED7000; 工作正常。但我想避免不得不返回并更改整个应用程序的颜色 - 宁愿全局化变量 - 但放入 scss 文件时它甚至不会工作。
刚刚搞砸了，看来您的问题与您尝试将 SCSS 变量与 (--scrollbar-thumb-color) 一起使用的属性有关。测试一下并尝试使用$orange 为简单的背景颜色着色。
成功了！就是这样！现在必须弄清楚如何解决这个问题。