从.ts导入变量到.scss angular

Question

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

Answer 1

constructor(private elem: ElementRef){
    this.colorValue = "yellow";
    this.elem.nativeElement.style.setProperty('--text-color', colorValue);
}     

然后在 css 或 scss 中你可以使用 --text-color 变量

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

Answer 2

你尝试过ngStyle

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

然后在您的.ts中

 styleExp = 'red' 

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

Answer 3

无法从ts文件将变量导入到scss文件。 相反，您可以使用角度角度属性ngStyle和ngClass

Answer 4

一种选择是CSS变量 。

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

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

CSS：

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

JS：

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

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

Answer 5

我知道这已经过时了，但我想给出一个人们可能感兴趣的答案：

在 example.component.ts 中

@Component({
    selector: 'example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {
    ...
    @HostBinding('style.--nameOfVar') nameOfVar = 'red';
    ...
}

在 example.component.scss（或 css）中

.example {
    color: var(--nameOfVar);
}