Proper way of adding CSS file in Vue.js Application

1. Install sass

npm install sass-loader --save-dev

2. Create new css directory under your src/assets directory

3. Create a styles.scss file in the new css directory

4. Add the following line of code to your main.js file

import '../src/assets/css/styles.css';

In the styles.scss file you can import multiple css files.

@import '~bootstrap/scss/bootstrap.min.css';
@import './common.css';

You can also write regular CSS properties like this in the same file

body {
  background: gray;
}

div {
  font-weight: bold;
}

5. Restart your dev server

npm run serve