附录4汇编问题

Question

似乎角没有为组件正确地编译sass，或者它没有像预期的那样编译sass。

例如，这段代码适用于app.component.scss

/* Works well */
.container {
   .header {
      margin-top: 20px;
   }
}
.container {
   .header {
      background-color: black;
   }
}

但是，如果我生成header组件，然后将样式添加到具有重复选择器的header.component.scss中，那么这是行不通的！

/* Doesn't work */
.container {
   .header {
      padding: 15px;
   }
}

只是不要告诉我，我不应该写这样的scss代码，直到它被角度框架的相关性识别。或者解释我是否做错了什么:)

Answer 1

我看出来了，我想你正面临着view-encapsulation的问题

1. 本机视图封装使用浏览器的本机影子DOM实现(请参阅MDN站点上的shadow DOM )将影子DOM附加到组件的主机元素，然后将组件视图放入该影子DOM中。组件的样式包含在阴影DOM中。
2. 模拟视图封装(默认)通过预处理(并重命名) CSS代码来模拟影子DOM的行为，从而有效地将CSS范围调整到组件的视图。
3. 不意味着角度没有视图封装。角将CSS添加到全局样式中。前面讨论的范围规则、隔离和保护不适用。这与将组件的样式粘贴到HTML中本质上是一样的。

encapsulation: ViewEncapsulation.Native