如何在Angular2组件中操作scss变量

Question

有没有办法可以更改Angular2组件中声明的scss变量？我想根据用户选择动态添加主题，因此需要修改scss变量。我读到了将所有scss变量保存在单独的scss文件中并将其导入其他scss文件中。但我可以在我的组件文件中导入相同的内容并修改变量。这可行吗？ TIA

目前我正在使用mixin。代码在这里：

// Color themes
$themes: (
  default: #ff0000,
  banana: #f1c40f,
  cherry: #c0392b,
  blueberry: #8e44ad,
  leaf: #27ae60,
  nightsky: #2980b9
);


// Helper theme mixin
@mixin theme($name, $color) {
    .#{$name}{
        background-color: lighten($color, 30%);
    }
  .#{$name} {
    h1{
      color: $color;
    }
  }
  .#{$name} {
    nav{
      a{
      color: $color;
      }
    }
  }
}

但有没有办法可以改变Angular组件中$ themes map中的变量。

Answer 1

Sass本质上是不可能：它是一个构建时工具，一个预处理器。 Angular只知道CSS（尽管styles元数据中的styleUrls和Component属性。）

这意味着当Angular已经掌握了你的风格时，Sass已经被编译成了CSS。您无法在运行时更改Sass变量，因为此时不存在

。

您可以改为使用custom properties并通过常规JavaScript进行更改。