diff --git a/src/components/layout/Footer.svelte b/src/components/layout/Footer.svelte
index e2c35ad..810ab57 100644
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@@ -10,7 +10,7 @@
 </footer>
 
 <style lang="scss">
-    @use 'src/styles/colors';
+    @use '$styles/colors';
 
     footer {
         display: flex;
diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte
index 1170587..032366e 100644
--- a/src/components/layout/Header.svelte
+++ b/src/components/layout/Header.svelte
@@ -3,7 +3,7 @@
 </header>
 
 <style lang="scss">
-    @use "src/styles/colors";
+    @use "$styles/colors";
 
     header {
         background: colors.$header;
diff --git a/src/components/tags/TagsColorContainer.svelte b/src/components/tags/TagsColorContainer.svelte
index ba02c41..84d1bf4 100644
--- a/src/components/tags/TagsColorContainer.svelte
+++ b/src/components/tags/TagsColorContainer.svelte
@@ -8,7 +8,7 @@
 </div>
 
 <style lang="scss">
-    @use '../../styles/colors';
+    @use '$styles/colors';
 
     .tag-color-container:is(.tag-color-container--rating) :global(.tag) {
         background-color: colors.$tag-rating-background;
diff --git a/src/components/ui/forms/TagCategorySelectField.svelte b/src/components/ui/forms/TagCategorySelectField.svelte
index 61040ee..5b5751b 100644
--- a/src/components/ui/forms/TagCategorySelectField.svelte
+++ b/src/components/ui/forms/TagCategorySelectField.svelte
@@ -22,7 +22,7 @@
 <SelectField bind:value={value} options={tagCategoriesOptions} name="tag_color"/>
 
 <style lang="scss">
-    @use '../../../styles/colors';
+    @use '$styles/colors';
 
     :global(select[name=tag_color]) {
         :global(option) {
diff --git a/src/components/ui/menu/Menu.svelte b/src/components/ui/menu/Menu.svelte
index 3a0ce44..13f0583 100644
--- a/src/components/ui/menu/Menu.svelte
+++ b/src/components/ui/menu/Menu.svelte
@@ -3,7 +3,7 @@
 </nav>
 
 <style lang="scss">
-    @use 'src/styles/colors';
+    @use '$styles/colors';
 
     nav {
         display: flex;
diff --git a/src/components/ui/menu/MenuItem.svelte b/src/components/ui/menu/MenuItem.svelte
index 26463ef..616bfbb 100644
--- a/src/components/ui/menu/MenuItem.svelte
+++ b/src/components/ui/menu/MenuItem.svelte
@@ -23,7 +23,7 @@
 </svelte:element>
 
 <style lang="scss">
-    @use '../../../styles/colors';
+    @use '$styles/colors';
 
     .menu-item {
         display: flex;
diff --git a/src/routes/features/groups/import/+page.svelte b/src/routes/features/groups/import/+page.svelte
index 01583bc..3b07ae2 100644
--- a/src/routes/features/groups/import/+page.svelte
+++ b/src/routes/features/groups/import/+page.svelte
@@ -113,7 +113,7 @@
 {/if}
 
 <style lang="scss">
-    @use '../../../../styles/colors';
+    @use '$styles/colors';
 
     .error, .warning {
         padding: 5px 24px;
diff --git a/src/routes/features/maintenance/import/+page.svelte b/src/routes/features/maintenance/import/+page.svelte
index ad01898..b9f28ee 100644
--- a/src/routes/features/maintenance/import/+page.svelte
+++ b/src/routes/features/maintenance/import/+page.svelte
@@ -113,7 +113,7 @@
 {/if}
 
 <style lang="scss">
-    @use '../../../../styles/colors';
+    @use '$styles/colors';
 
     .error, .warning {
         padding: 5px 24px;
diff --git a/src/styles/popup.scss b/src/styles/popup.scss
index df4dc80..89b2e09 100644
--- a/src/styles/popup.scss
+++ b/src/styles/popup.scss
@@ -1,4 +1,4 @@
-@use './colors';
+@use 'colors';
 
 * {
   box-sizing: border-box;