vuetify.js - Overriding vuetify sass variables which use another variable

Question

I've got my variables.scss file setup and working as per the docs. However if I try and override a variables which relies on another variable it throws an error.

I want to change

$container-padding-x: $grid-gutter / 2 !default;

To

$container-padding-x: $grid-gutter !default;

However I can't do this without also specifying $grid-gutter which in turn relies on $spacer so I end up having to define all 3. Is this expected behaviour?

Here's the build error I get...

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ?
6 │ $container-padding-x: $grid-gutter;
  │                       ^^^^^^^^^^^^
  ?
  src/sass/variables.scss 6:23  @import
  src/sass/global.scss 1:9      root stylesheet

question from:https://stackoverflow.com/questions/65876341/overriding-vuetify-sass-variables-which-use-another-variable

Answer 1

Remove the !default.

!default is used to prevent vuetify from overwriting your modifications, that means that when you change a sass variable, it will be set before vuetify, when vuetify variables are invoked, the !default will say if this variable is already set, ignore it.

$container-padding-x: $grid-gutter