覆盖包中的css样式

Question

Angular cli automatically loads css files those are in node_module directory. I am using @swimlane/ngx-dnd and it has css style. But I want to use bootstrap styles for my components. What's standard way for doing this ?
Appreciate any idea and helps.

Answer 1

If you want to override a package's styles, you can just provide overrides in your own stylesheet or component stylesheet with the same or more specific style definition. Your definition will need to match their style, but must be loaded after their style and/or be more specific so that your style applies correctly.

If you want to exclude their style sheets you will need to use some sort of plugin for webpack to Ignore the css files in the package directory.

I'd recommend the first approach.

If the package you are using creates dynamic markup along with the styling, you may need to change your component encapsulation so that the component you are using can successfully apply your styles to the generated dom elements.

Answer 2

In your app.component.ts, add:

@Componenent({
   encapsulation:ViewEncapsulation.None,
   styleUrls:[''],  // Add your bootstrap css files
   templateUrl: ....
})