Adding global CSS in VueJs application

This is a quick tutorial on how we can add the global CSS in the Vue.js application.

In each Vue.js component, we can add the component-based CSS which means the CSS will only be applicable for that component.

This can be done by using the scoped keyword in style tag inside the component as below:

<template>
   <div>
    </div>
</template>

<script>
  
</script>

<style scoped>
    /*add your css here*/
    
</style>

If we have the common CSS, we need to use a global CSS file to add it and use the class name inside the HTML element inside components.

For this, let's create a css folder under src >> assets and add a main.css file. This file will contain all the global CSS.

Now, we need to import the created CSS file; which can be done under the main.js file. Import the file as below

import './assets/css/main.css';

If we want to add multiple global CSS files we can simply add the file and import it in main.js as described.