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

有没有办法可以更改 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 映射内的变量。

This is 不可能的Sass 的本质是：它是一个构建时工具，一个预处理器。 Angular 只了解 CSS（尽管styles and styleUrls财产在Component元数据）。

这意味着当 Angular 掌握你的样式时，Sass 已经被编译为 CSS。你无法在运行时更改 Sass 变量因为他们不存在到那时就不再了。

您可以改为使用自定义属性 https://developer.mozilla.org/en-US/docs/Web/CSS/--*并通过常规 J​​avaScript 更改它们。