Defining App Color Variables in Vue

To have a set of css variables accessible form vue components, create a variables.css file in the assets folder

root {
  --font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  --primary-color: #333a4b;
}

import the styles in App.vue

<style>
  @import './assets/styles/variables.css';
</style>

then use in components

<style scoped>
  #something {
    font-family: var(--font-family);
    color: var(--primary-color);
  }
</style>