0

在我的 component.scss 文件中,我有 mixin 变量,我正在尝试为 div 元素设置波纹颜色。

如果我在 HTML 中设置直接颜色值,例如:[matRippleColor]="red",则波纹颜色已应用并正常工作

但是,如果我将mixin 变量的名称scss 类名称赋予 [matRipplecolor],则不会应用波纹颜色。

component.scss

@import '~@angular/material/theming';
@mixin dashboard-component-theme($bg-ripple) {

    .rippleCOLOR {
        background-color: $bg-ripple;
        color: $bg-ripple;
    }
}

component.html

<!-- WORKING: Direct Color value -->
<div matRipple [matRippleColor]="red"> Some text </div>


<!-- NOT WORKING: mixin variable -->
<div matRipple [matRippleColor]="$bg-ripple"> Some text </div>

<!-- NOT WORKING: scss class name -->
<div matRipple [matRippleColor]="rippleCOLOR"> Some text </div>

需要从 scss 文件中的 mixin 变量设置波纹颜色

4

1 回答 1

1

您不能在 HTML 文档/元素中使用 scss,因为您需要将其编译成 css ..

下面的一些 youtube 教程.. scss 安装和编译

实际上很奇怪,因为很久以前我很生气为什么我的 scss 无法正常工作.. 我认为这完全与服务器设置有关:S

于 2019-02-16T16:44:39.620 回答