将变量从 .ts 导入 .scss

Question

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

原文由 Omar Ayala 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一种选择是 CSS 变量。

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

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

CSS：

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

记者：

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

如果你想要 SCSS 中变量的灵活性/可维护性——你可以让变量指向 JS/CSS 变量。

SCSS：

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

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

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

原文由 miir 发布，翻译遵循 CC BY-SA 4.0 许可协议