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

• $background-color
• $button-color
• $text-color
• 等等。

我的问题是每个组件都无法使用这些变量，因为组件不知道这些变量是什么。我不能导入一个或另一个主题，因为我想使用我在输入文件中声明的值。

那我该怎么办呢？有没有办法“导入”我在 angular.json 文件中编写的输入文件?

谢谢！

- Fede Snieg

Answer 1

如果您在全局样式中定义了Sass变量，则在动态更改主题后将无法访问它们。这是因为动态加载的主题仅包含CSS规则，而不是Sass；此外，在运行时，组件的SCSS已经编译为CSS，因此也没有Sass变量的概念。

相反，您可以使用CSS变量，它具有良好的浏览器支持（除了IE和Opera Mini）。

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

dark-theme.scss

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

light-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，则会重新使用您的深色主题变量。

- David

---

没错，目前我是这样解决的。我试图避免混合CSS变量和SCSS变量。为什么我不能在每个输入文件中覆盖我的SCSS变量并从我的组件中使用它们呢？ - Fede Snieg

因为主题的 SCSS 文件在加载时已经被编译成 CSS，所以变量的概念已经不存在了。 - David

那么我的组件scss文件和输入的scss文件是分别编译的吗？ - Fede Snieg

在您的组件中，如果引用了您的两个主题之一（比如暗色主题），则组件的 SCSS 将使用该主题的值进行编译。动态导入另一个主题（例如亮色主题）将不会产生影响，因为第二个主题中被覆盖的 Sass 变量仅包含其在 light.css 中被覆盖的值，而不会出现在其他地方。 - David

你也可以创建一个变量来表示使用的主题，比如 $is-dark。因此，你可以在组件的 scss 文件中根据这个变量添加条件。这可以用于特定的场景，例如两个主题具有不同的变量。 - khush