Angular 如何在typescript中访问scss变量

我想生成一个对象，它将创建一个HTML元素。在这里，我需要为对象提供颜色、背景色和边框

我不想硬编码所有这些值，而是想从SCS中获取它们

我试过这种方法，效果很好。不确定这是否是正确的方法。所以，寻找完美的解决方案

SCSS示例代码：

:root {
    --normal-rate: #00008b;
    --special-rate : #80d4ff;
    --flat-rate : #F7941D;
}

打字脚本代码：

this.normalRate = window.getComputedStyle(document.documentElement).getPropertyValue("--normal-rate");
this.specialRate = window.getComputedStyle(document.documentElement).getPropertyValue(RateColor.SpecialRate);
this.flatRate = window.getComputedStyle(document.documentElement).getPropertyValue(RateColor.FlatRate);

this.obj= [
        { title: '', allDay: false,..., backgroundColor: this.specialRate, borderColor: this.specialRate },
        { title: '', allDay: false,..., backgroundColor: this.normalRate, borderColor: this.normalRate },
        { title: '', allDay: false,..., backgroundColor: this.flatRate, borderColor: this.flatRate }
      ];

---

我一直想知道这一点，但我认为你的方式也很好。我偶然发现了其他实现（），其中一个是使用npm包将SCSS变量作为JSON对象导入。至于哪种方法最好，还不确定。但我想我会尝试你的方法。@50尝试从该链接，但无法导入scss文件。。而且，我在我的项目中不使用webpack，请检查一下。其中大多数都比你的方式复杂。我唯一关心的是你的方式是否污染了全局名称空间？很难定义一个最佳或推荐的解决方案，这取决于你的网站结构。这个没问题。另一种方法是创建一个CSS类，将这些属性设置为这些变量，并将该类设置为新组件。还要注意的是，这些不是SASS变量，它们是CSS变量。在这里你可以看到它们之间的区别，在这里你可以看到CSS变量。@Alexartizl因为我们不能在typescript中访问SASS，所以我使用CSS变量来获取并使其动态化