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

Posted 2023-03-07

【中文标题】将 .ts 中的变量导入 .scss angular

【英文标题】：Import variables from .ts into .scss angular

【发布时间】：2019-03-26 10:37:27

【问题描述】：

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

【问题讨论】：

将变量导入.scss是什么意思？那里的那些通常与样式完全相关，与 JS（或 TS）代码无关。

将 scss 变量导入 TS 文件没有任何意义。请重新审视您的想法。

是另一种方式。我想将我的变量从我的 ts 文件导出到我的 scss 文件。这一切都是因为我将颜色作为组件中的输入变量。

【参考方案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