Angular 2 Special Selectors with SASS

Question

I'm trying to add SASS instead of vanilla CSS to the project and can get it mostly working.

My project setup

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

What I've done so far

1. Installed node dependencies via npm and added them to the dependencies list in package.json
   • node-sass
   • sass-loader
   • raw-loader
2. Changed the default style to "scss" in the angular-cli.json file
3. Changed all the style sheet file extensions from .css to .scss
4. Updated the styleUrls in the relevant components

The issue

There are no errors or warning messages when building the project. Almost all of the styles are applied after building; however, I use the /deep/ (>>>) special selector in a couple of components to pass a style down to the child component - I do this in order to conditionally apply a style to a specific class in a child component depending on its host/parent component. Here's an example of a style that exists in the host/parent component's stylesheet:

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

This is the only style that does not seem to be applied correctly. When viewing the UI locally in any browser, it's clear that the .holder class is not defined as above.

There seems to be much discussion of how to get SASS working in Angular 2 projects on StackOverflow, but nothing relating to SASS (or any other CSS preprocessor) and Angular 2 special selectors specifically. My question is two-fold:

• What, specifically, am I doing wrong here?
• How, generally, do Angular 2 special selectors figure in to any CSS preprocessing steps?

Answer 1

Replacing :host with \:host and >>> with /deep/ worked for me.