CODEWITHSUNDEEP
cssangularwebpacksassangular-cli
Rassoul
Rassoul

Reputation: 194

Overriding css styles of a package in angular

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.

Upvotes: 0

Views: 1995

Answers (2)

Gary
Gary

Reputation: 81

In your app.component.ts, add:

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

Upvotes: 3

Brandon Culley
Brandon Culley

Reputation: 1334

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.

Upvotes: 1

Related Questions