Include CSS files in Vue 2

When you are new to vue.js it takes some times to learn where to add external files,css, js etc. When your template has stylesheets in css files you have to include them in the project and it should be accessible from anywhere in the project. Import the css files on App.vue. This should be inside a style tag.

<style>

@import './assets/styles/yourstyles.css';

</style>

You have to include the right loaders also. You can make this a scope and apply only the styles in particular component. Another way to include css is as follows.

You can use @ symbol before url string as given below.

'import Vue from 'vue'

require('@/assets/styles/main.css')

Then in the App.vue file add style scooped src as given below.

<template>

<div>

</div>

</template>

<style scoped src="@/assets/styles/mystyles.css">

</style>