Include external CSS file in Vue.js component

Tutorial on how to import local or external CSS files in Vue.js application.

Here we will see how to include the CSS file in Vue:

1. Only in one component ( in a separate file )
2. Globally

Import CSS files into a single file component

In Vue.js app, we have to work with many components. And if we want to include a local or external CSS file in only one component then we have to import it in the <style></style> tags.

For example, we want to include the style.css file from the assets folder to a single component. To import it we have to do is:

<style>
@import '@/assets/css/style.css';
</style>

or if you want to include a cdn (like bootstrap) only in one component then:

<style>
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
</style>

Now the styles from style.cssfile will only be applied to the single component only.

Include CSS globally in Vue

In vuejs , to include a CSS file that is globally accessible to all the components in your vue project, we have to import it in the main.js file.

Example:

We have a style.css file in the assets folder. To load it in our Vue.js app we have to import it to main.js :

import './assets/css/style.css'

You can also include cdn in the main.js :

import 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css';

In main.js file:

Now all the CSS code in the style.css file will be applied to your entire Vue.js app.

Related Topics:

How To Add Common Header And Footer In Vuejs.

How To Add Dynamic HTML Attributes In VueJS ?

Set URL Query Params In Vue Using Vue-Router

Add External Script Tags In Vue JS Component