How to add custom styles to 3rd party components?

Question

What is the recommended way to customize styles for a 3rd party component that I have downloaded via npm?

For example the component ng2-tag-input. I run a webpack build that bundles all the 3rd party js-files into a vendor.js and all the 3rd party css into a vendor.css.

Since this is generated upon build, I don't want to make changes to vendor.css or commit it.

Say that I want to add my own styles to ng2-tag-input, how does one best do that? Should I just override its styles in my own site.css or is there another way?

Answer 1

Obviously you cannot modify it in node_modules folder because node_modules should never be included in code repository and your changes . So, there are two options:

1. override styles with your own css (more specific rules)
2. do not use npm and include ts/css manually

I actually prefer the second option if I need to alter the component because sometimes compatibility is not guarantee between different plugin versions.