Vue | How to import a stylesheet from a specific NPM package?

Question

I am trying to load animate.css. This package is installed using the command npm install --save animate.css. Now, what is the best way to import it inside the project?

I have stumbled upon some solutions asking to copy the file inside the static folder and load it from there. But I would rather not to as we lose all the benefits of NPM if we move it from its package.

Answer 1

Assuming you want animate.css globally in your application

In your webpack

module: {
  loaders: [
    { test: /\.css$/, loader: "css-loader" }
  ]
}

in yout main.js

import 'animate.css/animate.min.css'

Answer 2

What I did with similar scenario in my project is used src imports.

In your App.vue component add two style tags , one for global styles as App.vue is the entry point and other for scoped styles if you have any with the scoped attribute.

<style src="animate.css/animate.min.css">
    /* global styles */
</style> 

<style scoped>
    /* local styles */
</style>