Scss variables are undefined when accessed globally about vite-vue2-vuetify-ts-starter HOT 4 OPEN

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.

from vite-vue2-vuetify-ts-starter.

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?

from vite-vue2-vuetify-ts-starter.

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

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

from vite-vue2-vuetify-ts-starter.

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'),
        },

from vite-vue2-vuetify-ts-starter.