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

Question

我很茫然，我一定很想念什么。这很简单。这是引用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是如何工作的，我是否不了解。我的文件没有被编译吗？

Answer 1

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

因此，请在./scss/base.table.scss'中导入包含您的变量的样式表。

Answer 2

就这样使用它：

$orange: #ED7000;

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