javascript - 如何在一个 Angular 组件中处理多个主题？

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是我的输入文件，我在其中设置变量，例如:

$背景色

$按钮颜色

$文本颜色

等等等等

我的问题是我不能使用每个组件中的这些变量，因为我的组件不知道这些变量是什么。我无法导入一个或另一个主题，因为我想使用我在输入文件中声明的值。
我该如何处理？有什么方法可以“导入”我在 angular.json 文件中编写的输入文件吗？

谢谢!

Answer 1

如果您在全局样式中定义 sass 变量，则在动态更改主题后将无法访问它们。这是因为动态加载的主题将只包含 css 规则，而不包含 sass；除了在运行时，您的组件 scss 也已经编译为 css，因此无论哪种方式都不再有 sass 变量的概念。

你可以做的是使用 CSS variables , 有好的browser support (除了 IE 和 Opera mini)。

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

黑暗主题.scss

:root{
  --button-background: darkgrey;
  --button-color: white;
}

轻主题.scss

:root{
  --button-background: lightgrey;
  --button-color: black;
}

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

组件.scss

button
{
  cursor: pointer;
  padding: 10px;
  border: 0;
  color:var(--button-color);
  background-color:var(--button-background);
}

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