I'm trying to add stylesheets encapsulated in specific components so as not to pollute the global scope with stylesheet rules. I have a series of widgets, each of which will need different 3rd-party stylesheets. In the end there could be hundreds of widgets, each one loaded on demand. It seems obvious that the following code should work, and both index.css and material.scss should both get bundled up with my components, and their rules will be encapsulated from the rest of the application.
@Component({
templateUrl: 'data-table1-widget.component.html',
styleUrls: [
'data-table1-widget.component.sass',
'../../../assets/css/ngx-datatable/index.css',
'../../../assets/css/ngx-datatable/material.scss',
'test.css'
]
})
However, I'm definitely not seeing what I would expect from index.css or material.css if they are included properly. I get no errors about missing files, but I don't see the rules for index or material getting applied. However, they DO work if you include them from the main styles.sass. So am I missing something here? How do I get multiple stylesheets loading into my component? Index.css works just fine, so it makes me wonder if there's something about how the rules are defined that makes them not work.
