Angular 2 Special Selectors with SASS

Question

I am trying to add SASS instead of vanilla CSS to the project and can make it work mostly.

My project setup

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

What have i done so far

• Node dependencies are installed via npm and added to the list of dependencies in package.json
  • node-sass
  • bicker-loader
  • crude loader
• Changed the default style to "scss" in the angular-cli.json file
• Changed all style sheet file extensions from .css to .scss
• Updated Urls style in corresponding components

Problem

There are no errors or warnings when creating the project. Almost all styles are applied after construction; however, I use the special switch / deep / (→>) in several components to pass the style to the child component - I do this to conditionally apply the style to a specific class in the child component, depending on its host parent component. Here is an example of the style that exists in the stylesheet of the host / parent component:

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

This is the only style that doesn't seem to apply correctly. When viewing the user interface locally in any browser, it is clear that the .holder class is not defined, as described above.

There seems to be a lot of discussion about how to get SASS to work in Angular 2 projects on StackOverflow, but nothing has to do with SASS (or any other CSS preprocessor) and Angular 2 special selectors. My question is twofold:

• What exactly am I doing wrong here?
• How, generally speaking, do Angular 2 special selectors appear in CSS preprocessing steps?

Answer 1

Replace :host with \:host and >>> with /deep/ for me.