Scss variables are undefined when accessed globally

[logue]

Change the value defined in vuetify in variables.scss. Now you can change the value defined in vuetify.

By default, the Roboto font and Noto Colr Emoji Glyf font for color pictograms loaded by webfontloader.ts.

[lukaslaskovski]

How can I overwrite maps from vuetify? The Vuetify 2 documentation in the example has:

$headings: (
   'h1': (
     'size': 1 rem,
     'line-height': 1.15em,
   ),
   'h2': (
     'size': 1.8rem,
     'line-height': 1.5em,
   ),
   'h3': (
     'size': 1.6rem,
     'line-height': 1.5em,
   ),
);

How is map-deep-merge defined now?

[logue]

I'm not sure, but isn't it map.deep-merge instead of map-deep-merge?

https://sass-lang.com/documentation/modules/map

[lukaslaskovski]

It works on a clean project. I had a little mess in the vite cache for sure but I had to add sass preprocessor into vite.config also and import vuetify variables to use global variables in component <style> section.

sass: {
          additionalData: [
            '@import "@/scss/variables"',
            '@import "vuetify/src/styles/settings/variables"',
            '',
          ].join('\n'),
        },
        scss: {
          additionalData: [
            '@import "@/scss/variables";',
            '@import "vuetify/src/styles/settings/variables";',
            '',
          ].join('\n'),
        },