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