Using 3rd Party CSS With WebPack and Angular 2 ft Animate.css

Sometimes learning something can be complicated moreover when we need to handle many things at the same time. So if your boss tells you that you need to add some CSS from a third-party library into your Angular 2 components AND handle the WebPack configuration, you can feel overwhelmed like this guy:

dog meme

No need to panic, I’ll get you through this in 5 min top chrono! We are going to use Animate.css because it’s one of the best libraries ever created by a human being.

The installation

The easiest part:

Now that we got our library in our node_modules folder, we need to say ‘Hey Component! The library is here, use it!’.

Two cases here (before reading this, I advise you to go here first and get my cheatsheet for a reminder).

Isolating your CSS

First case here, you have your Angular 2 Component and you don’t want other Components to use your external CSS.

It’s very simple:

You only need to require(‘animate.css’) and put it into your component’s styles!

Let it leak!

angular 2 CSS Shadow DOM leak

Let’s say you have 50 Components … You are not going to require Animate.css every time, just let it leak into your app!

It’s better to import it into your parent/root Component so if you need to replace it, you don’t have to search everywhere.

By setting encapsulation to ViewEncapsulation.None, Animate.css will be available for every components of your application!

Conclusion

Two things to remember here, requiring the module (require(‘moduleName’)) and setting the encapsulation according to your needs, either to isolate it or to let it leak into your application while handling class names conflicts!

 

2 Comments

  1. September 5, 2016    

    magnificent submit, very informative. I’m wondering why the other specialists of this sector don’t understand this. You should proceed your writing. I am confident, you’ve a huge readers’ base already!

    • Matthieu Drula Matthieu Drula
      September 5, 2016    

      Hi, thanks.
      It’s building up.

Leave a Reply

9 Shares