Unable to access Vuetify Sass module configuration

[glen-84]

(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]

I'd say with the current way of forwarding variables that this depends on https://github.com/sass/sass/issues/2745 We need to be able to call sass.render() on the component styles without re-loading all of vuetify, and then pass just that one module back to vue-loader so the scoped selectors can be added.

The modulesTypeError may be a webpack bug, will have to investigate further. We're getting sass-loader's options instead of our own for some reason.

[glen-84]

I'd say with the current way of forwarding variables that this depends on sass/sass#2745 We need to be able to call sass.render() on the component styles without re-loading all of vuetify, and then pass just that one module back to vue-loader so the scoped selectors can be added.

It looks like this might be available in Sass 1.45, if I'm understanding correctly.

[KaelWD]

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.

[BreizhReloaded]

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>

[kouts]

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

[jd-solanki]

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 😢

[jd-solanki]

If there is a workaround using the old @import I am happy to do that. Did anyone try?

[BreizhReloaded]

Same problem here. My current workaround is:

1. Create a dedicated custom settings.scss with all the needed variable in it:

// settings.scss
$border-radius-root: 10px !default;

2. In your main.scss:

@use "./settings" as settings;
@use "vuetify/styles" as vuetify with (
  $border-radius-root: settings.$border-radius-root
);

3. Anywhere else in your app:

@use "./settings" as settings;
// Use you custom settings variables

[BreizhReloaded]

It would be nice indeed to be able to override variable without the need to rewrite each variable, and to reuse overridden values easily.

[throrin19]

Same problem here with override variables and I have another question. How to use vuetify variables in our application ?

I try this :

• main.scss :

  @use 'vuetify/styles';
  
  // our styles
  @use './common/errors.scss';
  

• in one of our component :

  <style>
  @use '@/styles/main.scss' as main;
  
  .my-box-example {
      border-right: 1px solid map-get(main.$grey, 'lighten-2');
  }
  </style>
  

I have the error in compilation of the scss part Error: Undefined variable.

[KaelWD]

You can't currently

[throrin19]

Ah, too bad, it was a very useful feature to reuse parameters or colors, ... specific to vuetify in all our application (ex: breakpoints for media queries)

[KaelWD]

Correction: you can't if you're also customising them. The default values can be imported with @use 'vuetify/styles/settings'

[throrin19]

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

[shadow7412]

I got the default thing working for root level variables (ie, $font-size-root) but for ones that are defined in modules (btn-text-transform) I get the "not declared with !default in the @used module" error.

Any ideas?

@use "vuetify/styles" with (
    $font-size-root: 12px, // works
    $btn-text-transform: none, // breaks
);

[KaelWD]

I added support for meta.load-css() in 29039f37eca66c8c46744fd87c6d181af9e9d64b, you might be able to do something with that.

[throrin19]

@KaelWD We can use this like that ?

@use "sass:meta";

@use meta.load-css(
  "vuetify/styles",
  $with: (
    $color-pack: false,
    $utilities: false,
  )
);

[jd-solanki]

Thanks @KaelWD for this feature. With this I can create multiple vuetify SCSS config to let them override each other:

@use "sass:meta";
@use "sass:map";
@use "@/styles/variables" as userVariables;

$vuetify-overrides: (
 // ... Template overrides
);

@include meta.load-css("vuetify/styles", $with: map.deep-merge($vuetify-overrides, userVariables.$vuetify-overrides));

Above snippet uses configuration like this: Vuetify < Template < User.

However, we can't use this configured vuetify in our stylesheet. e.g. I can't access $card-elevation.

sass:meta docs.

Thanks 🙏🏻

[BreizhReloaded]

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.

[throrin19]

When I try to do the meta.load-css, I have the error This variable was not declared with !default in the @used module.

This is my script (the meta.load-css can only used with include)

@use './variables' as vars;

@use "sass:meta";

// our styles
@use './common';

@include meta.load-css(
  "vuetify/styles",
  $with: (
    $body-font-family: vars.$aq-body-font-family,
    $heading-font-family: vars.$aq-heading-font-familly,
  )
);

[wheelebin]

Has anyone been able to successfully customize vuetify and use vuetify sass variables elsewhere in their application using the meta.load-css function or any other approach that might exist?

[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.

[KaelWD]

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

[throrin19]

thanks @KaelWD but after try this, I have this error :

[plugin:vite:css] Can't find stylesheet to import.
   ╷
14 │ ┌ @forward 'vuetify/settings' with (
15 │ │   $body-font-family: $aq-body-font-family,
16 │ │   $heading-font-family: $aq-heading-font-familly,
17 │ │ );
   │ └─^
   ╵
  src/styles/_variables.scss 14:1  @use
  src/styles/main.scss 1:1         root stylesheet

Edit it works fine if I replace vuetify/settings by vuetify/styles/settings/_index

[KaelWD]

You need the next vuetify beta, currently only in nightly. vuetify/styles/settings doesn't include components so it won't be applied consistently.

[throrin19]

Ok, In my case, I use vite. I will waiting the next vuetify beta :) Thank you

[alokVishu]

Is anyone using the windows system? I am facing a sass override issue: https://github.com/vuetifyjs/vuetify/issues/15763

Sass override is working fine in the Mac system.

[riodw]

This helped me

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

[sneko]

You need the next vuetify beta, currently only in nightly. vuetify/styles/settings doesn't include components so it won't be applied consistently.

@KaelWD on my side it works to change $body-font-family with something like:

@use 'vuetify' with (
  $heading-font-family: ('Marianne', Verdana, arial),
)

but indeed if I set $border-radius-root it won't change the style for components. What's the hack to do so? I tried multiple things like mentioned into https://github.com/vuetifyjs/vuetify-loader/issues/221#issuecomment-1227305722 but it does not work.

Also, I tried to change my strategy to use vite-plugin-vuetify thinking it would help building .css of components with my custom settings... but it breaks my project (saying as error: [Vuetify] Could not find defaults instance) so unable to say if this would solve the problem.

Any idea?

EDIT: the solution for me was to upgrade from pnpm v7 to v8. It has to be with symlinks, Nothing more. If it's still not working for you with pnpm maybe try to use their hoisted feature to mimic a basic npm structure.

[MariiaRiabinina]

hello everyone! @sneko could you help me, please? Did you find a solution?