Vue 2 and Vuetify can't change gutters

Question

I can't see why this is not working. Currently I have a _core.scss file within my application that handles all my custom CSS (fonts, colours, etc). It looks like this:

$situ-font-path: "~@situlive/situ-theme/fonts";
$header-height: (
  xs: 64px,
  sm: 136px,
  md: 136px,
  lg: 136px,
  xl: 136px,
);

@import "~@situlive/situ-theme/sass/global/variables/colours";
@import "~@situlive/situ-theme/sass/global/variables/margins";
@import "~@situlive/situ-theme/sass/global/variables/padding";
@import "~@situlive/situ-theme/sass/global/variables/text";
@import "~@situlive/situ-theme/sass/global/mixins";
@import "~@situlive/situ-theme/sass/global/components/breadcrumbs";
@import "~@situlive/situ-theme/sass/global/components/images";
@import "~@situlive/situ-theme/sass/global/components/lists";
@import "~@situlive/situ-theme/sass/global/components/sections";
@import "~@situlive/situ-theme/sass/global/components/text";
@import "~vuetify/src/styles/styles.sass";

@include situ-text;

$drawer-width: 20vw;

@import "./components";

As you can see, I am importing vuetify styles. Now I have these, I want to be able to change the gutter sizes. I have looked online and in the vuetify folder (within node_modules) and have tried to override the variables, but nothing seems to happen. This is what it did look like:

$grid-gutter: 48px;
@import "~vuetify/src/styles/styles.sass";

I have also tried changing the $spacer and the $container-padding-x but no matter what I change, when I look at my site, it have the defaults:

Can anyone suggest a workaround, or tell me what I am doing wrong?

I am importing my core.scss in my vue.config.js

css: {
  loaderOptions: {
    // by default the `sass` option will apply to both syntaxes
    // because `scss` syntax is also processed by sass-loader underlyingly
    // but when configuring the `prependData` option
    // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
    // in that case, we can target the `scss` syntax separately using the `scss` option
    scss: {
      additionalData: `@import "@/scss/_core.scss";`,
    },
  },
},

fatm fatm · Accepted Answer · 2021-07-02T04:54:09

You can't just override vuetify sass variables like that. In vuetify documentation it can be only with webpack rules or nuxt. If you are using Laravel like me i suggest to you laravel-mix-vuetify extension.

Vue 2 and Vuetify can't change gutters

1 Answers