adngular 4 sass编译问题

Question

似乎angular没有为组件正确编译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代码，直到它会被Angular框架更正认可。或者解释我是否做错了什么：）

Answer 1

我可以看到，我认为你正面临着view-encapsulation

的问题

  

  

1. 本机视图封装使用浏览器的本机影子DOM   实现（请参阅MDN站点上的Shadow DOM）以附加阴影   DOM到组件的主机元素，然后放入组件   在那个影子DOM里面查看。包含组件的样式   在影子DOM中。

  

2. 模拟视图封装（默认）模拟行为       通过预处理（和重命名）CSS代码来影子DOM       有效地将CSS范围限定在组件的视图中。

  

3. 无意味着Angular不进行视图封装。 Angular补充道       CSS到全局样式。范围规则，隔离和       前面讨论的保护措施不适用。这基本上是       与将组件的样式粘贴到HTML中相同。

  

encapsulation: ViewEncapsulation.Native