Best way to have global css in Vuejs

What is the best way to have a global css file in Vuejs for all components? (Default css like bg color, button styling, etc)

• import a css file in the index.html
• do @import in main component
• put all the css in the main component (but that would be a huge file)

Import css in your index.html, but if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css.

As comments below suggested if using webpack adding this to main.js works:

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

I found the best way is to create a new file in the assets folder, I created as global.css but you can name anything of your choice. Then, import this file global.css file in the main.js.

Note: Using this approach you can also create multiple files if you think the global.css is getting really large then simply import all those files in the main.js.

@\assets\global.css

/* move the buttons to the right */
.buttons-align-right {
  justify-content: flex-end;
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routes'

Vue.config.productionTip = false

// Importing the global css file
import "@/assets/global.css"

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

In App.vue you can add a style property to declare you CSS file:

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