Styling does not go throguh Angular6

[sapmaik]

Im using Angluar 6.
in the html file of a component im using the nouislider tag.
And it works fine, i can even change width margin etc. via the scss.

But when it comes to changing the color of the connect bar via

.noUi-connect {
  background: #000000;
}

it doesnt work.
Even though that is the same approach like in your demo.
And documentation in the nouislider option about cssPrefix and cssClasses is very irretating without an example:)

The difference to the demo is that im importing the style like this:

@Component({
  selector: 'x',
  templateUrl: './x.component.html',
  styleUrls: ['./x.component.scss'],
})

is it an angular version issue?

[shivanisaz]

Facing the same issue. No solution on Github or Stack overflow is working.

For now, as a work-around I have added the overriding CSS like

.noUi-connect {
  background: #000000;
} 

in the global styles file. I'm using Angular-CLI so for me, that's src/styles.css
But of course this is valid only if you want the same style for every slider in the entire application.

[fpfcarvalho]

you need to put /deep/ like this:

/deep/ .noUi-connect {
background: #000000;
}

because this class does not belong to your component but the other component.

[rubenheymans]

can't you use ViewEncapsulation.None?