updates

2023-04-27 12:09:14 +02:00
parent 3579a5894a
commit 552cd7269b
15 changed files with 392 additions and 47 deletions
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Contexted</title>
  </head>
  <body>
    <div id="app" class="bg-light"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,11 @@
      "version": "0.0.0",
      "dependencies": {
        "@popperjs/core": "^2.11.7",
+        "@vueuse/core": "^10.1.0",
        "bootstrap": "^5.2.3",
        "bootstrap-icons": "^1.10.5",
        "firebase": "^9.20.0",
+        "hamburgers": "^1.2.1",
        "vue": "^3.2.47"
      },
      "devDependencies": {
@@ -1012,6 +1014,11 @@
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz",
      "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA=="
    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.1.tgz",
@@ -1187,6 +1194,89 @@
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
    },
+    "node_modules/@vueuse/core": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz",
+      "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "10.1.0",
+        "@vueuse/shared": "10.1.0",
+        "vue-demi": ">=0.14.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+      "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz",
+      "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.0.tgz",
+      "integrity": "sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==",
+      "dependencies": {
+        "vue-demi": ">=0.14.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+      "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/ansi-regex": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -1500,6 +1590,11 @@
        "node": ">= 6"
      }
    },
+    "node_modules/hamburgers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/hamburgers/-/hamburgers-1.2.1.tgz",
+      "integrity": "sha512-uFuVVF7/MeUtRWrA+S1FGGo4iVi7RgPzZAmljBnSeDh4snOZzaQ+oB6CI1m4vKD5RGz9s70ufgiJLxgivqA26Q=="
+    },
    "node_modules/he": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -2780,6 +2875,11 @@
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz",
      "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA=="
    },
+    "@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
    "@vitejs/plugin-vue": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.1.tgz",
@@ -2940,6 +3040,46 @@
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
    },
+    "@vueuse/core": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz",
+      "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==",
+      "requires": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "10.1.0",
+        "@vueuse/shared": "10.1.0",
+        "vue-demi": ">=0.14.0"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+          "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+          "requires": {}
+        }
+      }
+    },
+    "@vueuse/metadata": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz",
+      "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg=="
+    },
+    "@vueuse/shared": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.0.tgz",
+      "integrity": "sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==",
+      "requires": {
+        "vue-demi": ">=0.14.0"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+          "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+          "requires": {}
+        }
+      }
+    },
    "ansi-regex": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -3170,6 +3310,11 @@
        "is-glob": "^4.0.1"
      }
    },
+    "hamburgers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/hamburgers/-/hamburgers-1.2.1.tgz",
+      "integrity": "sha512-uFuVVF7/MeUtRWrA+S1FGGo4iVi7RgPzZAmljBnSeDh4snOZzaQ+oB6CI1m4vKD5RGz9s70ufgiJLxgivqA26Q=="
+    },
    "he": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
+    "@vueuse/core": "^10.1.0",
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.5",
    "firebase": "^9.20.0",
+    "hamburgers": "^1.2.1",
    "vue": "^3.2.47"
  },
  "devDependencies": {
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,23 +1,55 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import TopBar from './components/TopBar.vue'
 import SideBar from './components/SideBar.vue'
-import useNotes from './composables/useNotes'
+import Note from './components/Note.vue'
+import { activeNote } from './composables/useNotes'

-const { notes } = useNotes()
+const sideBarCollapsed = ref(false)
+
+const viewModes: ViewMode[] = [
+  { name: 'Note', icon: 'card-text' },
+  { name: 'List', icon: 'list-task' },
+  { name: 'Mindmap', icon: 'diagram-3' },
+]
+const activeViewMode = ref(viewModes[0])
 </script>

 <template>
-  <TopBar />
-  <div class="container g-3 d-flex h-100" style="padding-top: 50px">
-    <SideBar class="py-3" />
-    <div id="main" class="bg-white border-start border-end px-4 py-3">
-      main
-      <pre>{{ notes }}</pre>
+  <TopBar
+    :side-bar-collapsed="sideBarCollapsed"
+    @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
+  />
+  <div class="container g-3 position-relative d-flex h-100">
+    <SideBar
+      :view-modes="viewModes"
+      :active-view-mode="activeViewMode"
+      @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
+      class="py-3"
+      style="margin-top: 50px"
+    />
+    <div
+      id="main"
+      class="bg-white border-start border-end px-4 py-3"
+      :class="{ 'side-bar-collapsed': sideBarCollapsed }"
+    >
+      <Note v-if="activeNote" :note="activeNote" />
    </div>
  </div>
 </template>
-<style>
+<style lang="scss">
 #main {
  overflow: auto;
  flex: 1 1 0;
-}</style>
+  position: absolute;
+  top: 50px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin-left: $sidebar-width;
+  transition: margin $transition-duration ease-out;
+  &.side-bar-collapsed {
+    margin-left: 0;
+  }
+}
+</style>
--- a/src/assets/_variables.scss
+++ b/src/assets/_variables.scss
@@ -0,0 +1,4 @@
+$primary: #1e4bc4;
+$white: #fff !default;
+$transition-duration: 0.2s;
+$sidebar-width: 220px;
--- a/src/assets/style.scss
+++ b/src/assets/style.scss
@@ -1,5 +1,4 @@
-$primary: #1e4bc4;
-
+@import './_variables';
@import 'bootstrap/scss/bootstrap';

 body,
@@ -7,3 +6,7 @@ body > div,
 html {
  height: 100%;
 }
+
+body {
+  overflow-y: scroll;
+}
--- a/src/components/Hamburger.vue
+++ b/src/components/Hamburger.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+const props = defineProps<{
+  sideBarCollapsed: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggleSideBar'): void
+}>()
+</script>
+<template>
+  <button
+    class="hamburger hamburger--spin-r"
+    :class="{ 'is-active': !props.sideBarCollapsed }"
+    type="button"
+    @click="emit('toggleSideBar')"
+  >
+    <span class="hamburger-box">
+      <span class="hamburger-inner"></span>
+    </span>
+  </button>
+</template>
+<style scoped lang="scss">
+$hamburger-layer-color: $white;
+$hamburger-layer-width: 25px;
+$hamburger-layer-height: 3px;
+$hamburger-layer-spacing: 3px;
+$hamburger-padding-x: 0px;
+$hamburger-padding-y: 0px;
+$hamburger-scale-speed: calc($transition-duration/.22s);
+
+@import 'hamburgers/_sass/hamburgers/hamburgers.scss';
+@if index($hamburger-types, spin-r) {
+  /*
+    * Spin Reverse
+    */
+  .hamburger--spin-r {
+    .hamburger-inner {
+      transition-duration: ($hamburger-scale-speed * 0.22s);
+      transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+      &::before {
+        transition: top
+            ($hamburger-scale-speed * 0.1s)
+            ($hamburger-scale-speed * 0.25s)
+            ease-in,
+          opacity ($hamburger-scale-speed * 0.1s) ease-in;
+      }
+
+      &::after {
+        transition: bottom
+            ($hamburger-scale-speed * 0.1s)
+            ($hamburger-scale-speed * 0.25s)
+            ease-in,
+          transform
+            ($hamburger-scale-speed * 0.22s)
+            cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        transform: rotate(-225deg);
+        transition-delay: ($hamburger-scale-speed * 0.12s);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+        &::before {
+          top: 0;
+          opacity: 0;
+          transition: top ($hamburger-scale-speed * 0.1s) ease-out,
+            opacity
+              ($hamburger-scale-speed * 0.1s)
+              ($hamburger-scale-speed * 0.12s)
+              ease-out;
+        }
+
+        &::after {
+          bottom: 0;
+          transform: rotate(90deg);
+          transition: bottom ($hamburger-scale-speed * 0.1s) ease-out,
+            transform
+              ($hamburger-scale-speed * 0.22s)
+              ($hamburger-scale-speed * 0.12s)
+              cubic-bezier(0.215, 0.61, 0.355, 1);
+        }
+      }
+    }
+  }
+}
+button.hamburger {
+  outline: none !important;
+  line-height: 1;
+  opacity: 0.9;
+  border-radius: 2rem;
+}
+.hamburger-box {
+  display: block;
+}
+</style>
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  note: Note
+}>()
+</script>
+<template>
+  <h1>{{ note.title }}</h1>
+  <div>{{ note.content }}</div>
+</template>
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -1,35 +1,35 @@
 <script setup lang="ts">
-import useNotes from '../composables/useNotes'
+import { rootNote } from '../composables/useNotes'
 import SideBarMenu from './SideBar/SideBarMenu.vue'
 import SideBarMenuItem from './SideBar/SideBarMenuItem.vue'
-const { rootNote } = useNotes()

-interface ViewMode {
-  name: string
-  icon: string
-}
-const viewModes: ViewMode[] = [
-  { name: 'Note', icon: 'card-text' },
-  { name: 'List', icon: 'list-task' },
-  { name: 'Mindmap', icon: 'diagram-3' },
-]
+const props = defineProps<{
+  viewModes: ViewMode[]
+  activeViewMode: ViewMode
+}>()
+
+const emit = defineEmits<{
+  (e: 'setViewMode', viewMode: ViewMode): void
+}>()
 </script>
 <template>
-  <div id="sidebar" class="position-relative pe-3 d-flex flex-column" style="width: 200px">
+  <div id="sidebar" class="position-relative pe-3 d-flex flex-column">
    <SideBarMenu>
      <template #header>Root note</template>
      <template #items>
-        <SideBarMenuItem icon="house">{{
-          rootNote?.title
-        }}</SideBarMenuItem>
+        <SideBarMenuItem icon="house">{{ rootNote?.title }}</SideBarMenuItem>
      </template>
    </SideBarMenu>
    <SideBarMenu>
      <template #header>View mode</template>
      <template #items>
-        <SideBarMenuItem v-for="viewMode in viewModes" :icon="viewMode.icon">{{
-          viewMode.name
-        }}</SideBarMenuItem>
+        <SideBarMenuItem
+          v-for="viewMode in props.viewModes"
+          :icon="viewMode.icon"
+          :active="viewMode.name === activeViewMode.name"
+          @click="emit('setViewMode', viewMode)"
+          >{{ viewMode.name }}</SideBarMenuItem
+        >
      </template>
    </SideBarMenu>
    <SideBarMenu>
@@ -44,5 +44,6 @@ const viewModes: ViewMode[] = [
 #sidebar {
  gap: 1rem;
  overflow-y: auto;
+  width: $sidebar-width;
 }
 </style>
--- a/src/components/SideBar/SideBarMenuItem.vue
+++ b/src/components/SideBar/SideBarMenuItem.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 const props = defineProps<{
  icon?: string
+  active?: boolean
 }>()
 </script>
 <template>
-  <a class="text-opacity-50 text-decoration-none w-100 d-block link-secondary">
+  <a
+    class="text-opacity-50 text-decoration-none w-100 d-block"
+    :class="props.active ? 'link-primary fw-bolder' : 'link-secondary'"
+  >
    <i :class="`bi bi-${props.icon}`" class="me-2" v-if="props.icon"></i
    ><slot></slot>
  </a>
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,10 +1,30 @@
+<script setup lang="ts">
+import Hamburger from './Hamburger.vue'
+const props = defineProps<{
+  sideBarCollapsed: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'toggleSideBar'): void
+}>()
+</script>
 <template>
  <div
+    id="topbar"
    class="bg-primary position-absolute top-0 start-0 end-0"
    style="height: 50px"
  >
    <div class="container g-3 h-100 d-flex align-items-center text-white">
-      top bar
+      <Hamburger
+        class="me-3"
+        :side-bar-collapsed="props.sideBarCollapsed"
+        @toggle-side-bar="emit('toggleSideBar')"
+      /><span>Contexted</span>
    </div>
  </div>
-</template> 
+</template>
+<style scoped>
+#topbar {
+  z-index: 500;
+}
+</style>
--- a/src/composables/useNotes.ts
+++ b/src/composables/useNotes.ts
@@ -1,15 +1,30 @@
-import { ref } from 'vue'
-const notes = ref<Note[]>([])
+import { ref, computed, watch } from 'vue'
+import { useTitle } from '@vueuse/core'

-export default function useNotes() {
-  const setDefaultNotes = (defaultNotes: Note[]) => {
-    notes.value = defaultNotes.map((note) => ({
+export const notes = ref<Note[]>([])
+
+export const activeNote = ref<Note>()
+watch(activeNote, () => {
+  if (activeNote.value) useTitle(`${activeNote.value.title} | Contexted`)
+})
+
+export const rootNote = computed<Note | undefined>(() =>
+  notes.value.find((note: Note) => note.isRoot)
+)
+watch(
+  rootNote,
+  () => {
+    if (rootNote.value) activeNote.value = rootNote.value
+  },
+  { immediate: true }
+)
+
+export const setDefaultNotes = (defaultNotes: Note[]) => {
+  notes.value = defaultNotes.map(
+    (note): Note => ({
      ...note,
      created: new Date().getTime(),
      modified: new Date().getTime(),
-    }))
-  }
-  const rootNote = notes.value.find((note) => note.isRoot)
-
-  return { notes, setDefaultNotes, rootNote }
+    })
+  )
 }
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -11,7 +11,11 @@ declare global {
      to: string[]
      from: string[]
    }
-    isRoot?: boolean
+  }
+
+  interface ViewMode {
+    name: string
+    icon: string
  }
 }
 export {}
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,9 +2,8 @@ import { createApp } from 'vue'
 import './assets/style.scss'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import App from './App.vue'
-import useNotes from './composables/useNotes'
+import { setDefaultNotes } from './composables/useNotes'
 import { defaultNotes } from './utils/defaultNotes'
-const { setDefaultNotes } = useNotes()
 setDefaultNotes(defaultNotes)

 createApp(App).mount('#app')
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,4 +4,13 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [vue()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @import "./src/assets/_variables.scss";
+        `,
+      },
+    },
+  },
 })