在Angular中动态更改styles.scss

Question

我想根据Angular自举之前已知的变量动态应用SCSS样式.是否有可能以styles.scss编程方式进行更改？在main.ts引导之前,我想动态添加一行,如:

@import 'assets/styles/customerA/_themes.scss';
                       or 
@import 'assets/styles/customerB/_themes.scss';

取决于来自服务器的变量值.

如果以上操作不可行,是否有任何方法可以填充styles.scss将在服务器上定义的另一个文件的内容？我想更改styles.scss而不是任何其他"本地"scss文件.

Answer 1

我建议遵循Angular Material网站的一般形式：https : //github.com/angular/material.angular.io/blob/master/angular.json。值得克隆此仓库并在本地使用它。有几个运动部件。

在您的angular.json文件中，您将按如下所示添加css。注意，您需要将scss分别编译为css才能起作用。他们在tools/build-theme.sh脚本中执行此操作。：

{
  "input": "src/assets/customer-1-theme.css",
  "lazy": true,
  "bundleName": "customer-1-theme"
},
{
  "input": "src/assets/customer-2-theme.css",
  "lazy": true,
  "bundleName": "customer-2-theme"
},

然后，看看他们的样式管理器：https : //github.com/angular/material.angular.io/blob/master/src/app/shared/style-manager/style-manager.ts

您将创建一个函数，根据需要动态添加和删除此样式表：

function createLinkElementWithKey(key: string) {
  const linkEl = document.createElement('link');
  linkEl.setAttribute('rel', 'stylesheet');
  linkEl.classList.add(getClassNameForKey(key));
  document.head.appendChild(linkEl);
  return linkEl;
}

然后，在ThemePicker中，您将设置一个可观察的对象来管理主题的设置和删除。参见（https://github.com/angular/material.angular.io/blob/master/src/app/shared/theme-picker/theme-picker.ts）：

installTheme(themeName: string) {
  const theme = this.themes.find(currentTheme => currentTheme.name === themeName);
  if (!theme) {
    return;
  }
  this.currentTheme = theme;
  if (theme.isDefault) {
    this.styleManager.removeStyle('theme');
  } else {
    this.styleManager.setStyle('theme', `assets/${theme.name}.css`);
  }

  if (this.currentTheme) {
    this._themeStorage.storeTheme(this.currentTheme);
  }
}

就我个人而言，我的处理方式略有不同，但这意味着scss会编译到一个css文件中，并且该类是动态选择的。他们的方式增加了一个额外的构建步骤，但允许延迟加载已编译的scss。

管理全局样式

您会在他们的angular.json文件中注意到他们有一个main.scss，无论选择哪种辅助样式都可以使用它。该文件将处理您需要的所有全局主题。注意在他们的main.scss中，它们导入了几个Sass partials。这些允许他们为任何主题设置全局样式。您可以研究它们的使用方式，这里它们使用局部的主要原因是它们可以通过使用mixin将变量从次要sass文件传递到这些局部。

@mixin material-docs-app-theme($theme) {
  $primary: map-get($theme, primary);
  .docs-primary-header {
    background: mat-color($primary);

map-get是Sass函数，使您能够定义对象并在Mixins中使用其值。材质设计在这里使用的是sass函数，但是您可以使用更简单的方法在main.scss中获取自定义颜色。在您的style-a / style-b scss中创建一个自定义主题。

$my-custom-theme: (
  background-color: #ffff,
  button-background: rgba(200, 200, 200, 0.6),
  foreground: #34383c
);

然后，您可以将其@include更改为：

@include material-docs-app-theme($theme, $my-custom-theme);

material-docs-app-theme混合将更改为：

@mixin material-docs-app-theme($theme, $my-custom-theme) {
  $background-color: map-get($my-custom-theme, background-color);
  .our-background {
    background-color: $background-color;
  }

这使您有机会在各个延迟加载的样式表中定义自定义颜色，并将其在全局main.scss中可用。Sass的Mixins和Partials使之成为可能。

Answer 2

在与它斗争了很多之后，我在CSS variables. 这正是我要找的！您可以在运行时更改它们，因此动态主题是可行的。这是一篇很好的文章，描述了 Angular 中的步骤：

https://medium.com/@amcdnl/theming-angular-with-css-variables-3c78a5b20b24