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

$背景颜色
$按钮颜色
$文本颜色
等等等等

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

谢谢！

Answer 1

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

您可以改为使用 CSS variables, which have good browser support（除了 IE 和 opera mini）。

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

暗-theme.scss

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

浅色-theme.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，它将返回使用深色主题的变量。

如何在 angular 组件中处理多个主题？

How can I handle multiple themes in an angular component?

javascript

angular

variables

sass

theming