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

Question

我很茫然，我一定是漏掉了什么。这很简单。这是引用 scss 文件的 angular 组件：

@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 的工作原理有什么我不知道的吗？我的文件没有被编译吗？

Answer 1

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

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

Answer 2

就这样使用吧：

$orange: #ED7000;

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

SCSS color variable failing to compile in Angular component