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 回答