vuetify-loader: Unable to access Vuetify Sass module configuration

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

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.

It would be useful to have a way of getting the overridden Vuetify SCSS vars inside Vue components.

Oh, that’s really interesting. Can’t you deep merge the different sets into an other variables, and @use that variable?

I have this error when I try to do this :

Error: Can't find stylesheet to import.
    ╷
  2 │ @use 'vuetify/styles/settings'
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    src/modules/login/components/Container.vue 2:1  root stylesheet

@throrin19 Using @use "vuetify/styles/settings/_index" as settings; works for me.

I am theme vendor and I have two SCSS files from where vuetify SCSS variables can be overridden. However, the issue is we can’t do the below at the moment:

@forward "vuetify/styles" with (
    $border-radius-root: 10px !default,
);

@use "vuetify/styles";

.v-btn {
    border-radius: styles.$border-radius-root;
}

I tried the same without vuetify and everything is working perfectly.

I have reproduced the example: https://github.com/jd-solanki/vuetify-scss

main branch: Pure SCSS implementation (Working as expected) vuetify-issue: Trying to override vuetify SCSS vars from multiple files 😢

Hello and happy new year gentlemen!

I’ve been facing something similar: are we talking about reusing elsewhere in the project the overridden Vuetify set of Sass variables? Extending a bit glen-84’s example, how can I @use the Vuetify settings, but including with my own values?

Something like that:

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;
    font-size: x.$font-size-root
}
</style>

This helped me

• https://github.com/vuetifyjs/vuetify/issues/16593#issuecomment-1420162611

Not quite. It looks like it will make the import replacement more robust because it can be done with an importer now instead of relying on webpack/vite, but there’s still no stateful compiler.

This makes it much easier for Sass to cache information across @import and @use rules

I think that’s just referring to canonicalization.