将 .ts 中的变量导入 .scss angular答案

【问题标题】：Import variables from .ts into .scss angular将 .ts 中的变量导入 .scss angular
【发布时间】：2019-03-26 10:37:27
【问题描述】：

我正在开发一个角度组件，我想从我的 ts 文件中导入我的 scss 文件变量（例如颜色），我遇到了一些问题。我看过一些 node-sass 和 webpack 的例子，但对我来说不是很清楚。谢谢

【问题讨论】：

【解决方案1】：

一个选项是CSS Variables。

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

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

CSS：

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

JS：

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

请务必确认此功能具有您的应用所需的浏览器支持级别。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你试过 ngStyle

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

然后在您的 .ts 中

 styleExp = 'red'

您可以在官方文档中阅读更多内容 https://angular.io/api/common/NgStyle

【讨论】：