从.ts导入变量到.scss angular

Question

我正在开发一个角度组件，我想将ts文件中的变量（例如颜色）导入到我的scss文件中，我将解决一些问题。 我已经看到了一些有关node-sass和webpack的示例，但对我来说却不是很清楚。 谢谢

Answer 1

您尝试过ngStyle

 <some-element [ngStyle]="{'color': styleExp}">...</some-element>

，然后在您的.ts

 styleExp = 'red' 

您可以在官方文档中了解更多信息 https://angular.io/api/common/NgStyle

Answer 2

无法从ts文件将变量导入到scss文件。相反，您可以使用角度角度属性ngStyle和ngClass

Answer 3

一个选项是CSS Variables。

这不是预处理中可用的SASS变量，而是运行时在浏览器中可用的变量。因此，您可以使用javascript获取/设置它，然后CSS样式将根据变量值进行更新。

例如，假设您的组件允许您通过JavaScript变量textColor设置文本颜色：

CSS：

p { color: var(--text-color); }

JS：

element.style.setProperty("--text-color", textColor);

请确保验证此功能是否具有您的应用所需的浏览器支持级别。