Angular 2特殊选择器与SASS

Question

我正在尝试将SASS添加到项目中，以代替原始的CSS，并且基本上可以使用。

我的项目设置

• angular-cli（1.0.0-beta.18）
• TypeScript转译器（1.8.10）
• Webpack打包工具（2.1.0-beta.25）

我迄今为止所做的事情

1. 通过npm安装了节点依赖项并将其添加到package.json的依赖项列表中
   • node-sass
   • sass-loader
   • raw-loader
2. 在angular-cli.json文件中将默认样式更改为“scss”
3. 将所有样式表文件扩展名从.css更改为.scss
4. 更新相关组件中的styleUrls

问题

在构建项目时没有错误或警告消息。几乎所有的样式都应用于构建后；但是，在一些组件中，我使用/deep/ (>>>)这个特殊选择器将样式传递给子组件——我这样做是为了有条件地将样式应用于特定类别的子组件，具体取决于它的主机/父组件。下面是一个存在于主机/父组件样式表中的样式示例：

:host >>> .holder {
  margin-top: 0px;
  padding-top: 12px;
  border-top: 2px solid #eee;
}

这是唯一一个似乎没有正确应用的样式。在任何浏览器中本地查看UI时，可以清楚地看到.holder类没有像上面那样定义。

在StackOverflow上似乎有很多关于如何在Angular 2项目中使用SASS的讨论，但没有任何关于SASS（或任何其他CSS预处理器）和Angular 2特殊选择器的讨论。我的问题有两个方面：

• 具体来说，我在这里做错了什么？
• 通常情况下，Angular 2特殊选择器如何影响任何CSS预处理步骤？

- jastingo

Answer 1

将:host替换为\:host，并将>>>替换为/deep/对我很有效。

- Mixthos

---

已知SASS不支持>>>。然而，/deep/可以正常工作，但为什么你需要使用\:host而不是:host呢？以前从未见过有人提到过这一点。 - Günter Zöchbauer

当我使用:host时，出现了错误信息：“Invalid CSS after "..., sans-serif; }": expected 1 selector or at-rule, was "host: /deep/ > rout"。”可能是因为我在使用缩进式语法。 - Mixthos

我明白了。我从来没有使用过 *.sass，只用过 *.scss。谢谢你的反馈。 - Günter Zöchbauer

附加问题：这里的 :host 前面的额外反斜杠有什么作用？ - philip yoo

Answer 2

对于所有使用最新版本 Angular（4+）的用户，

请使用:host ::ng-deep替代:host /deep/

- Nimish goel