从 TypeScript 访问 SCSS 变量答案

【问题标题】：Access SCSS variable from TypeScript从 TypeScript 访问 SCSS 变量
【发布时间】：2022-01-14 07:13:42
【问题描述】：

我正在 Angular 中创建一个自定义指令。我有一个带有变量的 SCSS 文件，如下图所示，我想将其导入到我的指令 (.directive.ts) 中。我该怎么做？

谢谢

【问题讨论】：

您是否介意从图片中提取代码并将其作为文本粘贴到您的问题中？

【解决方案1】：

将它们写入custom CSS variables（您可以使用@each 规则进行列表）：

:root {
  --bs-light: #f1f2f3;
  --bs-dark: #3e3e3c;
}

使用此代码从文档中读取变量：

export enum ScssVariables {
    Light = "light",
    Dark = "dark",
}

@Directive({
    selector: "[test-attr]",
})
export class TestDirective {
    public styles: { [key in ScssVariables]: string | null } = {
        light: null,
        dark: null,
    };

    constructor() {
        const styles = window.getComputedStyle(document.body);
        Object.keys(this.styles).forEach((key: ScssVariables) => {
            this.styles[key] = styles.getPropertyValue("--bs-" + key);
        })
        console.log(this.styles);
    }
}

【讨论】：

谢谢！！拯救了我的一天 =D