Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

vue.js

vuejs2

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.

like image 554
Julien Le Coupanec Avatar asked Jul 03 '17 11:07

Julien Le Coupanec


People also ask

How do I import CSS into app Vue?

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.

How do I import a SCSS file into Vue?

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).

How do I add global CSS to Vue?

To add global CSS in Vue. js, we can import our global CSS file in main. js . import "./assets/css/main.


2 Answers

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'
like image 88
CuriousGuy Avatar answered Sep 28 '22 09:09

CuriousGuy


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> 
like image 35
Vamsi Krishna Avatar answered Sep 28 '22 08:09

Vamsi Krishna