vuetify sass variables vue-cli

1. Install Vue CLI: Use the command npm install -g @vue/cli to install Vue CLI globally on your machine.

2. Create a new project: Run the command vue create my-project to create a new Vue project named "my-project".

3. Configure Vuetify: After the project is created, navigate into the project directory by using cd my-project. Then, run vue add vuetify to add Vuetify to your project.

4. Customize Vuetify theme: Open the src/main.js file and add the following lines of code at the beginning:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c',
      },
    },
  },
})

new Vue({
  vuetify,
}).$mount('#app')

1. Use Vuetify variables: In your component's style section, you can use Vuetify's SASS variables to customize the theme. For example:

<template>
  <v-card>
    <v-card-title class="primary">
      My Card
    </v-card-title>
    <v-card-text>
      This is the content of my card.
    </v-card-text>
  </v-card>
</template>

<style scoped>
.primary {
  background-color: $primary;
  color: $text-color;
}
</style>

1. Compile and run the project: To compile and run the project, use the command npm run serve. This will start a local development server where you can see your Vue app running with Vuetify styles applied.

That's it! You have successfully set up Vuetify with Vue CLI and customized the theme using SASS variables.