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

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.scssbutton{  cursor: pointer;  padding: 10px;  border: 0;  color:var(--button-color);  background-color:var(--button-background);}然后，当您动态加载浅色主题时，它将覆盖现有变量。如果您随后动态删除 ，它将返回到使用深色主题的变量。light-theme.css