Unable to access Vuetify Sass module configuration

(as discussed Kael on Discord)

https://github.com/glen-84/vuetify-loader-issue

If you try to forward the configured Vuetify Sass module with something like:

main.scss

@forward "vuetify/styles" with
    (
        $body-font-family: "monospace"
    );

app.vue

<style lang="scss" scoped>
@use "./main" as x;

a {
    font-family: x.$body-font-family;
}
</style>

You see two different types of errors:

1. modulesTypeError: options.awaitResolve is not a function
2. SassError: This variable was not declared with !default in the @used module.

---

---

@KaelWD What is the best way forward here? (excuse the pun)

If this is not possible, should developers manually import the Sass files?

[KaelWD]

This is now officially supported and I’ve updated the documentation: https://next.vuetifyjs.com/en/features/sass-variables/

[KaelWD]

This seems to work for me:

// main.scss
@use './settings';
@use 'vuetify/styles';

// _settings.scss
@forward 'vuetify/lib/styles/settings' with (
  $color-pack: false,
  $container-max-widths: (
    xs: null,
    sm: null,
    md: 768px,
    lg: 1250px,
    xl: 1800px,
    xxl: 2300px,
  ),
);

@forward 'vuetify/dist/component-variables' with (
  $button-height: 56px,
);

// App.vue
<style lang="scss">
  @use './settings';
  
  @debug settings.$button-height;
</style>

Or if having it split between general and component variables is too confusing:

// _vuetify.scss
@forward 'vuetify/lib/styles/settings';
@forward 'vuetify/dist/component-variables';

// _settings.scss
@forward './vuetify' with (
  $color-pack: false,
  $container-max-widths: (
    xs: null,
    sm: null,
    md: 768px,
    lg: 1250px,
    xl: 1800px,
    xxl: 2300px,
  ),
  $button-height: 56px,
);

If you use pnpm or yarn plug-n-play though you might have to switch to something else, there must be a bug in sass or something because the symlinked files don’t have the variables defined.