将变量从 .ts 导入 .scss angular

Question

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

Answer 1

一种选择是CSS 变量。

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

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

CSS：

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

JS：

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

如果您希望 SCSS 中的变量具有灵活性/可维护性，您可以让变量指向 JS/CSS 变量。

社会保障体系：

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

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

Answer 2

你尝试过ngStyle吗

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

然后在你的.ts中

 styleExp = 'red' 

您可以在官方文档上阅读更多信息 https://angular.io/api/common/NgStyle