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?