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.
There are multiple ways of including a css file in your vue app. The way I prefer is to have a single css file import inside the main. js file for your vue app. You can have multiple scss/css files which you can import in this main/styles.
You have SCSS variables in one file that you want to make available to your Vue components. The good news is that the Vue CLI makes it incredibly easy to support writing SCSS, and with Vue's single file components you can simply add lang="scss" to the <style> block ( docs).
To add global CSS in Vue. js, we can import our global CSS file in main. js . import "./assets/css/main.
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'
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With