css - 带有 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 中的依赖项列表
   • node-sass
   • sass 加载器
   • 原始加载程序
2. 在 angular-cli.json 文件中将默认样式更改为“scss”
3. 将所有样式表文件扩展名从 .css 更改为 .scss
4. 更新了相关组件中的 styleUrls

问题

构建元素时没有错误或警告消息。几乎所有的样式都是在构建之后应用的；但是，我使用/deep/(>>>) special selector在几个组件中将样式向下传递给子组件——我这样做是为了根据主机/父组件有条件地将样式应用于子组件中的特定类。下面是主机/父组件样式表中存在的样式示例:

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

这是唯一似乎没有正确应用的样式。在任何浏览器中本地查看 UI 时，很明显 .holder 类未按上述方式定义。

似乎有很多关于如何让 SASS 在 StackOverflow 上的 Angular 2 元素中工作的讨论，但没有与 SASS(或任何其他 CSS 预处理器)和 Angular 2 特殊选择器相关的内容。我的问题有两个:

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

Answer 1

将 :host 替换为 \:host 并将 >>> 替换为 /deep/ 对我有用。