modify style

src/styles/desktop/configured-variables/_template.scss

@@ -0,0 +1 @@
+@forward "@/styles/desktop/template/template/variables";

src/styles/desktop/configured-variables/_vuetify.scss

@@ -0,0 +1,3 @@
+@forward "@/styles/desktop/template/vuetify/variables" with (
+    $input-chips-margin-top: 0
+);

src/styles/desktop/template/base/_components.scss

@@ -4,7 +4,7 @@
 @use "./mixins";
 @use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
 @use "@/styles/desktop/template/layout/placeholders";
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 
 // 👉 Avatar group
 .v-avatar-group {

src/styles/desktop/template/base/_dark.scss

@@ -1,7 +1,7 @@
 /** Materio Template base classes **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 
 // ————————————————————————————————————
 // * ——— Perfect Scrollbar

src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss

@@ -1,7 +1,7 @@
 /** Materio Template base classes **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 @use "./placeholders" as *;
 @use "@/styles/desktop/template/template/placeholders" as *;
 @use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;

src/styles/desktop/template/base/_layouts.scss

@@ -1,7 +1,7 @@
 /** Materio Template base classes **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 
 /* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
 

src/styles/desktop/template/base/_utilities.scss

@@ -1,7 +1,7 @@
 /** Materio Template base classes **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 @use "@/styles/desktop/template/layout/mixins" as layoutsMixins;
 
 $card-spacer-content: 16px;

src/styles/desktop/template/base/_utils.scss

@@ -3,7 +3,7 @@
 
 @use "sass:map";
 @use "sass:list";
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 
 // Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
 @function map-deep-get($map, $keys...) {

src/styles/desktop/template/base/_variables.scss

@@ -3,7 +3,7 @@
 
 @use "vuetify/lib/styles/tools/functions" as *;
 
-@forward "../layout/variables" with (
+@forward "@/styles/desktop/template/layout/variables" with (
   // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
   $layout-vertical-nav-z-index: 1004,
   $layout-overlay-z-index: 1003,

src/styles/desktop/template/base/_vertical-nav.scss

@@ -4,7 +4,7 @@
 @use "./placeholders" as *;
 @use "@/styles/desktop/template/template/placeholders" as *;
 @use "@/styles/desktop/template/layout/mixins" as layoutsMixins;
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 @use "./mixins" as mixins;
 @use "vuetify/lib/styles/tools/states" as vuetifyStates;
 

src/styles/desktop/template/base/libs/vuetify/_overrides.scss

@@ -2,7 +2,7 @@
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
 @use "@/styles/desktop/template/base/utils";
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 
 // 👉 Application
 // ℹ️ We need accurate vh in mobile devices as well

src/styles/desktop/template/base/placeholders/_default-layout-vertical-nav.scss

@@ -1,7 +1,7 @@
 /** Materio Template base classes **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 @use "./misc";
 @use "@/styles/desktop/template/base/mixins";
 

src/styles/desktop/template/base/placeholders/_vertical-nav.scss

@@ -2,7 +2,7 @@
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
 @use "@/styles/desktop/template/base/mixins";
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 @use "vuetify/lib/styles/tools/states" as vuetifyStates;
 
 %nav-header-action {

src/styles/desktop/template/configured-variables/_template.scss

@@ -1 +0,0 @@
-@forward "../template/variables";

src/styles/desktop/template/configured-variables/_vuetify.scss

@@ -1 +0,0 @@
-@forward "../vuetify/variables";

src/styles/desktop/template/layout/_default-layout.scss

@@ -5,7 +5,7 @@
 @use "./rtl";
 @use "./placeholders";
 @use "./mixins";
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 
 html,
 body {

src/styles/desktop/template/layout/_mixins.scss

@@ -2,7 +2,7 @@
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
 @use "./placeholders";
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 
 @mixin rtl {
     @if variables.$enable-rtl-styles {

src/styles/desktop/template/layout/_placeholders.scss

@@ -2,7 +2,7 @@
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
 // placeholders
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 
 %boxed-content {
     @at-root #{&}-spacing {

src/styles/desktop/template/layout/component/vertical-nav-layout.scss

@@ -1,7 +1,7 @@
 /** Materio Template layout styles **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 @use "@/styles/desktop/template/layout/placeholders";
 @use "@/styles/desktop/template/layout/mixins";
 

src/styles/desktop/template/layout/component/vertical-nav.scss

@@ -1,7 +1,7 @@
 /** Materio Template layout styles **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 @use "@/styles/desktop/template/layout/mixins";
 
 // 👉 Vertical Nav

src/styles/desktop/template/template/_components.scss

@@ -2,7 +2,7 @@
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
 @use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 @use "./mixins";
 @use "@/styles/desktop/template/base/mixins" as mixins_base;
 

src/styles/desktop/template/template/_variables.scss

@@ -16,7 +16,7 @@ $vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
 $vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default;
 $vertical-nav-items-icon-margin-inline-end: 0.625rem !default;
 
-@forward "../base/variables" with (
+@forward "@/styles/desktop/template/base/variables" with (
   $layout-vertical-nav-collapsed-width: 68px !default,
   // ℹ️ This is used to keep consistency between nav items and nav header left & right margin
   // This is used by nav items & nav header

src/styles/desktop/template/template/placeholders/_vertical-nav.scss

@@ -1,7 +1,7 @@
 /** Materio Template styles **/
 /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
 
-@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "@/styles/desktop/configured-variables/template" as variables;
 
 // ℹ️ Add divider around section title
 %vertical-nav-section-title {

vite.config.js

@@ -38,7 +38,7 @@ export default defineConfig(async () => {
             }),
             vuetify({
                 styles: {
-                    configFile: 'styles/desktop/template/configured-variables/_vuetify.scss'
+                    configFile: 'styles/desktop/configured-variables/_vuetify.scss'
                 }
             }),
             VitePWA({