具有SASS的Angular 2特殊选择器

Question

我正在尝试将SASS而不是vanilla CSS添加到项目中,并且可以使其大部分工作.

我的项目设置

• angular-cli(1.0.0-beta.18)
• TypeScript转换器(1.8.10)
• Webpack bundler(2.1.0-beta.25)

到目前为止我做了什么

1. 通过npm安装节点依赖项并将它们添加到package.json中的依赖项列表中
   • 节点萨斯
   • 上海社会科学院装载机
   • 原装载机
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预处理步骤？

Answer 1

更换:host用\:host和>>>与/deep/为我工作.