Angular 在 TS 中获取 scss 样式

【问题标题】：Angular get scss style in TSAngular 在 TS 中获取 scss 样式
【发布时间】：2021-02-24 08:52:04
【问题描述】：

我想知道是否可以（以及如何）将 scss 文件中设置的 scss 值访问到组件的 ts 代码中（可能通过 @ViewChild ？）。

我想要文件中的值（例如“25vh”）而不是计算出来的值。

我需要这个用于内部 API。

【问题讨论】：

【解决方案1】：

你可以像这样在你的 scss 文件中设置一个变量（在文件的顶部）

:root {
  --myWidth: 25vh;
}

然后在你的 scss 文件中使用它

element {
  width: myWidth;
}

你可以在你的 TS 文件中访问它

//get your value
var styleProperty= element.style.getPropertyValue("--myWidth");


// set your value
element.style.setProperty("--myWidth", "50vh");

【讨论】：

【解决方案2】：

您可以在 SCSS 中定义变量：

:export {
    height: $height;
    // etc...
}

并且可以在ts文件中导入：

import variables from '{path_to_scss}'

【讨论】：