jonnie jonnie - 1 year ago 218
Sass (Sass) Question

Angular2 ng-content scss nested styles and StyleUrls not working when using :host

I am building a component which uses

and I have found that I cannot use nested scss or the StylesUrl when I use the
:host >>>

For instance :

:host >>> .toolbar-brand{
color: red;
font-weight: 500;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;

:host >>> .nav-bar-menu-options.hlink, .nav-bar-menu-options.drop-down{
font-weight: 500;
text-decoration: none;
position: relative;
top: -6px;
font-size: 16px;
text-transform: uppercase;
padding: 0 10px 0 10px;

&.has-divider {
border-right: 1px solid #b0bec5;


:host >>> .nav-bar-menu-options.hlink:hover {
text-decoration: underline;
cursor: pointer;
:host >>> .fill-remaining-space {
flex: 1 1 auto;
:host >>> .search-link {
cursor: pointer;

:host >>>.search-input-container{

position: absolute;
top: 3px;

:host >>> .my-input{
border-left: 1px solid #b0bec5;
padding: 11px 75px 11px 60px;
background: transparent;
margin-left: 20px;
width: 100%;
&::placeholder {


Can anyone tell me why my
& my nested
doesn't work and also why when I place the contents inside a .scss file and use
it doesn't work with the
. Is this expected or a possibly Bug

I would Ideally like to be able to still use the nested scss from and external scss file

Answer Source

>>> is known to cause issues with SASS. Use instead /deep/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download