Override Vuetify SASS variables

user_2045079 0
Viewed 420

Should I import the minified .css file when trying to override SASS variables ?

I followed this https://vuetifyjs.com/en/getting-started/installation/#webpack-install

// src/plugins/vuetify.js

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

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

And now I'm trying to override $body-font-family with no success, I've tried creating a variables.scss file and also tried overriding it in my main .scss file but I wonder if I should be importing the minified version like that or if I need to do something different ?

vuetify.js vue.js
1 Answers

To override vuetify variables, just create a directory inside your src named scss and in there create a file called variables.scss

Inside that file you can change variables without importing anything.

For example my variables.scss

$container-max-widths: (
  md: 100%,
  lg: 1200px,
  xl: 1200px
);

$btn-text-transform: none;

$dialog-card-subtitle-padding: 0 56px 20px;
$dialog-card-title-padding: 36px 56px 10px;
$dialog-card-actions-padding: 8px 56px 36px;
$dialog-card-text-padding:0 56px 20px;
user_36766140
Related