如何在一个有角度的组件中处理多个主题？

Question

我正在开发一个Angular 9项目，我正在创建两个主题，每个主题都有自己的css输出文件。我修改了该文件以处理：angular.json"styles": [  {    "input": "src/styles/themes/light-theme.scss",    "lazy": true,    "bundleName": "light-theme"  },  {    "input": "src/styles/themes/dark-theme.scss",    "lazy": false,    "bundleName": "dark-theme"  }],light-theme并且是我的输入文件，我正在设置变量，例如：dark-theme$background色$button色$text色等等，等等。我的问题是，我无法从每个组件中使用这些变量，因为我的组件不知道这些变量是什么。我无法导入一个或另一个主题，因为我想使用我在输入文件中声明的值。我应该如何处理这个问题？有没有办法“导入”我在angular.json文件上编写的输入文件？谢谢！

Answer 1

如果在全局样式中定义了 sass 变量，则在动态更改主题后将无法访问它们。这是因为动态加载的主题将仅包含css规则，而不是sass;除了在运行时，你的组件scss也已经编译成css，所以没有更多的sass变量的概念。

你可以做的是使用CSS变量，它们具有良好的浏览器支持（除了IE和opera mini）。

例如，您可以在主题文件中定义这些变量

dark-theme.scss

:root{

  --button-background: darkgrey;

  --button-color: white;

}

光主题.scss

:root{

  --button-background: lightgrey;

  --button-color: black;

}

然后在组件中，使用这些变量

component.scss

button

{

  cursor: pointer;

  padding: 10px;

  border: 0;

  color:var(--button-color);

  background-color:var(--button-background);

}

然后，当您动态加载浅色主题时，它将覆盖现有变量。如果您随后动态删除 ，它将返回到使用深色主题的变量。light-theme.css