Angular-cli: :host >>>{ } sass overrides no longer working

[sharpmachine]

OS

macOS 10.12.1

Versions

angular-cli: 1.0.0-beta.19-3
node: 5.11.1
os: darwin x64

The log given by the failure.

none

Mention any other details that might be useful.

I upgraded from beta10 to beta19 and now any of my SASS that override other component styles using :host >>>{...} don't work anymore.

So i have my navbar component (nsg-navbar), which has a search component nested in it (nsg-search), but I'd like to override some of the search component's styling in my navbar.component.scss:

:host >  >  > {
    .nsg-search {
        @include box-shadow(none);

        .form-control {
            border: 0 !important;

            &:focus,
            &:hover {
                background-color: $body-bg;
            }
        }
    }
}

This worked in beta10, but doesn't work in the latest.

[ghost]

I found out that, even though the operators are said to be equivalent, the /deep/ operator works much better when using SASS. Hope this helps

[sharpmachine]

@christiandreher thanks for the response. Can you elaborate and/or share an example or what using the /deep/ looks like?

[tomwanzek]

To @christiandreher 's point, you might find this Angular issue 7108 informative. All it should take is using /deep/ in place of >>> , to circumvent the SASS issue.

[ghost]

I just replaced my >>>'s with /deep/'s, if I remember correctly. Don't have access to my codebase atm

[sharpmachine]

Thanks guys. That worked!

It just looks funny to me to have an operator that looks that way so it threw me off when it was suggested. But hey, it works so I'm happy.

Thanks again.

[filipesilva]

Just wanted to say that it's great how the community is so helpful, cheers!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}