在Angular 2材质中，我是否可以在运行时切换主题时使用SCSS文件中的SCSS变量，如$primary dark组件？

具体来说,

我希望一旦实施，就能够。。在任何组件SCSS文件中都有多个主题和引用$primary dark

将从中实现多个主题

我不是在寻找一个使用指令的解决方案

我被告知这是不可能的。

*由于评论而更新*

如果您想动态地交换它们，您仍然必须在site.scss文件中定义所有不同的主题

您必须将.unicorn黑暗主题类添加到任何要主题化的组件中

我实际上还没有完成动态主题，但我希望您能够将ng类放在根级别，并根据需要进行切换

@ttugates最初发布的主题链接中有一个标题为“多个主题”的部分

此外，如果单击该链接右上角的小油漆桶图标，您将看到4个不同的主题选项

如果您想玩一些演示代码，请在本地克隆material2 repo，安装依赖项，然后运行npm run demo app。很好的方式来发挥一些活的例子

*原始答案*

我们有一个site.scss文件，它声明了所有变量，例如

$grey-color: mat-color(mat-palette($mat-grey));

然后我们将site.scss文件导入到需要使用它的任何其他.scss文件中

@import '../../../styles/site.scss';

.set-for-deletion {
  text-decoration: line-through;
  color: $grey-color;
}

我们在构建中使用angular cli，因此我们将样式文件包括在.angular-cli.json文件中，就像您提供的链接中所说的那样

如果您使用的是Angular CLI，则内置了对将Sass编译为css的支持；您只需向angular-cli.json中的样式列表添加一个指向主题文件的新条目，例如unicorn-app-theme.scss

---

谢谢，我的同事比我更了解css/angular方法，我正在运行这个程序，以确保它与我们在运行时交换SCS以选择主题的方式一致。当我得到反馈时，我会用问题或标记作为回答。因为我们在运行时交换SCS，当用户选择新主题时，我被告知这种方法不起作用。我不知道这样更新我的问题是否合适，因为我们不导入所有主题，而是在运行时交换scss文件。或者接受您的答案并重新发布问题。您正在从site.scss特别导入$grey color，您将如何从运行时更改的x文件导入$primary？我刚刚更新了我的答案。我认为这就是您所寻找的。我同意此解决方案，但您仍然在site.scss文件或导入site.scss的mixin中对组件进行主题化。这不是问题中所述的从组件的SCSS文件中对组件进行主题化。当您将组件的SCSS文件定义为组件的样式URL元数据中列出的文件时，您对组件SCSS文件的定义是什么？您如何定义$primary dark主题X的较深原色或主题较深或ect的原色？属于所有主题的颜色变量。

@import '../../../styles/site.scss';

.set-for-deletion {
  text-decoration: line-through;
  color: $grey-color;
}