如何在angular2+；较少的

我正在努力解决这个问题，但找不到任何答案，尽管这似乎是一种常见的情况

我正在angular5中构建一个web应用程序，所有样式都使用@component styleUrls

我使用更少，所有颜色都在一个global-vars.less文件中定义，并导入到所有封装组件中

global-vars.less：

@color_0:  #283238; 

@color_0:  #283238; 
@color_1:  #EEFFEE; 

.dark-theme {
  @background-app-color: @color_0;
}

.light-theme {
  @background-app-color: @color_1;
}

某些非组件。无：

@import '../../global-vars';
.my-div {
  background-color: @color_0;
}

@import '../../global-vars';
.my-div {
  background-color: @background-app-color;
}

我想在global-vars.less中添加一个图层，以便按父类切换颜色：

global-vars.less：

@color_0:  #283238; 

@color_0:  #283238; 
@color_1:  #EEFFEE; 

.dark-theme {
  @background-app-color: @color_0;
}

.light-theme {
  @background-app-color: @color_1;
}

某些非组件。无：

@import '../../global-vars';
.my-div {
  background-color: @color_0;
}

@import '../../global-vars';
.my-div {
  background-color: @background-app-color;
}

当然，它不能工作，因为预编译的内容更少。但是我找不到一种有效的方法。 我试图改变CSS文件的标题，但因为angular使用封装的样式表作为标签插入，这对我没有帮助。 我尝试过使用mixin，但我无法根据父类创建mixin，所以没有运气

我唯一的选择是复制所有模块的所有CSS层次结构

.parent {
  .child {
    background: @light-color;
  }
}

.dark theme .parent {
  .child {
    background: @dark-color;
  }
}

但这将是一场噩梦，因为该项目规模巨大

任何帮助都将不胜感激。

---

谢谢。

我使用CSS自定义属性（变量）找到了答案 显然，它已经有了足够的支持， 使用它们，我可以绕过所有角度封装问题

我创建了一个themes.css文件，该文件被导入main.css

我有：

:root {
  --light_color_0: #FFF;
  --light_color_1: #EEE;

  --dark_color_0: #000;
  --dark_color_1: #111;
}

在同一个文件中：

:root {
  --bg_color: var(--light_color_0);
}

:root.darktheme {
  --bg_color: var(--light_color_0);
}

从我的角度组件内部，我有：

.panel_popup {
  background-color: var(--bg_color);
}

剩下的就是通过单击按钮添加一个类。

---

希望它能帮助别人

我不知道这是否能帮助你的特定角度项目，但IE11不支持使用最小划船的典型预定义主题生成方法。CSS自定义属性（变量）在IE11中不受支持。