diff --git a/frontend/package.json b/frontend/package.json
index cf012d45b..2a2ad903f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -98,7 +98,7 @@
     "@vueuse/router": "11.2.0",
     "axios": "1.7.7",
     "blurhash": "2.0.5",
-    "bulma-css-variables": "0.9.33",
+    "bulma": "^1.0.2",
     "change-case": "5.4.4",
     "date-fns": "4.1.0",
     "dayjs": "1.11.13",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 94cf21f00..bc5df0bf5 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -160,9 +160,9 @@ importers:
       blurhash:
         specifier: 2.0.5
         version: 2.0.5
-      bulma-css-variables:
-        specifier: 0.9.33
-        version: 0.9.33
+      bulma:
+        specifier: ^1.0.2
+        version: 1.0.2
       change-case:
         specifier: 5.4.4
         version: 5.4.4
@@ -2975,9 +2975,8 @@ packages:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
 
-  bulma-css-variables@0.9.33:
-    resolution: {integrity: sha512-D85dXLyLOBBDCuSSOeASc0kN2IknJqo5hzkZ22hxDHobxko/qay0nD+zNl2CJtF8v/7iwvQXqzVSDRnFVRSg9A==}
-    deprecated: bulma-css-variables is deprecated. Project has been shifted to monorepo @bulvar/bulma
+  bulma@1.0.2:
+    resolution: {integrity: sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==}
 
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
@@ -3565,10 +3564,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
-    engines: {node: '>=6'}
-
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -6794,7 +6789,7 @@ snapshots:
 
   '@babel/parser@7.25.4':
     dependencies:
-      '@babel/types': 7.25.4
+      '@babel/types': 7.26.0
 
   '@babel/parser@7.26.1':
     dependencies:
@@ -9361,7 +9356,7 @@ snapshots:
 
   builtin-modules@3.3.0: {}
 
-  bulma-css-variables@0.9.33: {}
+  bulma@1.0.2: {}
 
   cac@6.7.14: {}
 
@@ -10073,8 +10068,6 @@ snapshots:
       '@esbuild/win32-ia32': 0.24.0
       '@esbuild/win32-x64': 0.24.0
 
-  escalade@3.1.2: {}
-
   escalade@3.2.0: {}
 
   escape-goat@2.1.1: {}
@@ -13363,7 +13356,7 @@ snapshots:
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.2
+      escalade: 3.2.0
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
diff --git a/frontend/src/components/base/BaseCheckbox.vue b/frontend/src/components/base/BaseCheckbox.vue
index 2a3c40547..fe0276c62 100644
--- a/frontend/src/components/base/BaseCheckbox.vue
+++ b/frontend/src/components/base/BaseCheckbox.vue
@@ -8,7 +8,7 @@
 		>
 			<input
 				type="checkbox"
-				class="is-sr-only"
+				class="tw-sr-only"
 				:checked="modelValue"
 				:disabled="disabled || undefined"
 				@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"
diff --git a/frontend/src/components/base/Expandable.vue b/frontend/src/components/base/Expandable.vue
index 6bb009220..08054aece 100644
--- a/frontend/src/components/base/Expandable.vue
+++ b/frontend/src/components/base/Expandable.vue
@@ -51,10 +51,7 @@ const props = withDefaults(defineProps<{
 const wrapper = ref<HTMLElement | null>(null)
 
 const computedBackgroundColor = computed(() => {
-  if (wrapper.value === null) {
-    return props.backgroundColor || '#fff'
-  }
-  return props.backgroundColor || getInheritedBackgroundColor(wrapper.value)
+  return props.backgroundColor || wrapper.value === null ? '#fff' : getInheritedBackgroundColor(wrapper.value)
 })
 
 /**
diff --git a/frontend/src/components/date/DatepickerWithRange.vue b/frontend/src/components/date/DatepickerWithRange.vue
index 63d2c1872..5be3c80ef 100644
--- a/frontend/src/components/date/DatepickerWithRange.vue
+++ b/frontend/src/components/date/DatepickerWithRange.vue
@@ -221,6 +221,8 @@ const buttonText = computed<string>(() => {
 </script>
 
 <style lang="scss" scoped>
+@use "bulma/sass/utilities/css-variables.scss" as cv;
+
 .datepicker-with-range-container {
 	position: relative;
 }
@@ -231,7 +233,7 @@ const buttonText = computed<string>(() => {
 	border-radius: $radius;
 	border: 1px solid var(--grey-200);
 	background-color: var(--white);
-	box-shadow: $shadow;
+	box-shadow: cv.getVar("shadow");
 
 	&.is-open {
 		width: 500px;
diff --git a/frontend/src/components/date/DatepickerWithValues.vue b/frontend/src/components/date/DatepickerWithValues.vue
index 09d0b6f62..2f63dcb25 100644
--- a/frontend/src/components/date/DatepickerWithValues.vue
+++ b/frontend/src/components/date/DatepickerWithValues.vue
@@ -168,6 +168,8 @@ const customRangeActive = computed<boolean>(() => {
 </script>
 
 <style lang="scss" scoped>
+@use "bulma/sass/utilities/css-variables.scss" as cv;
+
 .datepicker-with-range-container {
 	position: relative;
 }
@@ -178,7 +180,7 @@ const customRangeActive = computed<boolean>(() => {
 	border-radius: $radius;
 	border: 1px solid var(--grey-200);
 	background-color: var(--white);
-	box-shadow: $shadow;
+	box-shadow: cv.getVar("shadow");
 
 	&.is-open {
 		width: 500px;
diff --git a/frontend/src/components/input/ColorPicker.vue b/frontend/src/components/input/ColorPicker.vue
index 9f41cf73a..1579298bc 100644
--- a/frontend/src/components/input/ColorPicker.vue
+++ b/frontend/src/components/input/ColorPicker.vue
@@ -130,6 +130,8 @@ function reset() {
 </script>
 
 <style lang="scss" scoped>
+@use "bulma/sass/utilities/css-variables.scss" as cv;
+
 .color-picker-container {
   display: flex;
   justify-content: center;
@@ -156,7 +158,7 @@ function reset() {
 		overflow: hidden;
 		border-radius: 100%;
 		border: $BORDER_WIDTH solid var(--grey-300);
-		box-shadow: $shadow;
+		box-shadow: cv.getVar("shadow");
 
 		& > * {
 			grid-row: 1;
diff --git a/frontend/src/components/input/Datepicker.vue b/frontend/src/components/input/Datepicker.vue
index c0deeadfc..cc20b3b73 100644
--- a/frontend/src/components/input/Datepicker.vue
+++ b/frontend/src/components/input/Datepicker.vue
@@ -120,6 +120,8 @@ function close() {
 </script>
 
 <style lang="scss" scoped>
+@use "bulma/sass/utilities/css-variables.scss" as cv;
+
 .datepicker {
 	input.input {
 		display: none;
@@ -132,7 +134,7 @@ function close() {
 	width: 320px;
 	background: var(--white);
 	border-radius: $radius;
-	box-shadow: $shadow;
+	box-shadow: cv.getVar("shadow");
 
 	@media screen and (max-width: ($tablet)) {
 		width: calc(100vw - 5rem);
diff --git a/frontend/src/components/misc/ProgressBar.vue b/frontend/src/components/misc/ProgressBar.vue
index b8fbc362a..5c261f5fe 100644
--- a/frontend/src/components/misc/ProgressBar.vue
+++ b/frontend/src/components/misc/ProgressBar.vue
@@ -24,6 +24,8 @@ withDefaults(defineProps<{
 </script>
 
 <style lang="scss" scoped>
+@use 'sass:list';
+
 .progress-bar {
 	--progress-height: #{$size-normal};
 	--progress-bar-background-color: var(--border-light, #{$border-light});
@@ -73,7 +75,7 @@ withDefaults(defineProps<{
 
 	// Colors
 	@each $name, $pair in $colors {
-		$color: nth($pair, 1);
+		$color: list.nth($pair, 1);
 		&.is-#{$name} {
 			--progress-value-background-color: var(--#{$name}, #{$color});
 
diff --git a/frontend/src/styles/common-imports.scss b/frontend/src/styles/common-imports.scss
index f48fd87a1..c83152864 100644
--- a/frontend/src/styles/common-imports.scss
+++ b/frontend/src/styles/common-imports.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
 //
 // IMPORTANT NOTE:
 //
@@ -10,10 +11,17 @@
 // are defined here.
 //
 
-$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
 
-// the default values get overwritten by the definitions above
-@import "bulma-css-variables/sass/utilities/_all";
+// utilities
+@forward "bulma/sass/utilities/initial-variables.scss" with (
+  $family-sans-serif: "'Open Sans', Helvetica, Arial, sans-serif"
+);
+@forward "bulma/sass/utilities/functions";
+@forward "bulma/sass/utilities/derived-variables";
+@forward "bulma/sass/utilities/controls";
+
+
+@use "bulma/sass/utilities/initial-variables.scss" as *;
 
 // since $tablet is defined by bulma we can just define it after importing the utilities
 $mobile: math.div($tablet, 2);
@@ -39,3 +47,10 @@ $vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
 
 $close-button-min-space: 84px;
+
+
+// re-added from bulma-css-variables
+$item-padding: 0.375rem 1rem;
+// 1152px container + 4rem
+$widescreen: 1152px + (2 * $gap);
+$border-light: $grey-lightest;
\ No newline at end of file
diff --git a/frontend/src/styles/components/_index.scss b/frontend/src/styles/components/_index.scss
index 4c934929a..668141471 100644
--- a/frontend/src/styles/components/_index.scss
+++ b/frontend/src/styles/components/_index.scss
@@ -1,4 +1,4 @@
-@import "tooltip";
-@import "labels";
-@import "task";
-@import "tasks";
+@forward "tooltip";
+@forward "labels";
+@forward "task";
+@forward "tasks";
diff --git a/frontend/src/styles/components/tasks.scss b/frontend/src/styles/components/tasks.scss
index 85c734d46..f5eeb974a 100644
--- a/frontend/src/styles/components/tasks.scss
+++ b/frontend/src/styles/components/tasks.scss
@@ -1,3 +1,5 @@
+@use "@/styles/common-imports" as *;
+
 // FIXME: These classes are used all over.
 // very hard to untangle
 // they have many overwrites at different positions
diff --git a/frontend/src/styles/custom-properties/_index.scss b/frontend/src/styles/custom-properties/_index.scss
index 72cd3ac1c..511f0f3a5 100644
--- a/frontend/src/styles/custom-properties/_index.scss
+++ b/frontend/src/styles/custom-properties/_index.scss
@@ -1,2 +1,2 @@
-@import "colors";
-@import "shadows";
\ No newline at end of file
+@forward "colors";
+@forward "shadows";
\ No newline at end of file
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index dbd81fa96..821eaaed4 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -1,11 +1,3 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@import "fonts";
-
-@import "transitions";
-
 // ###################
 // START BULMA IMPORTS
 // ###################
@@ -14,79 +6,93 @@
 // with the expeption of the bulma utilities – They are
 // imported globally in common-imports.scss
 
-// imports from "bulma-css-variables/sass/base/_all";
-@import "bulma-css-variables/sass/base/minireset";
-@import "bulma-css-variables/sass/base/generic";
-@import "bulma-css-variables/sass/base/animations";
+// themes
+@forward "bulma/sass/themes";
+
+// base
+@forward "bulma/sass/base/minireset";
+@forward "bulma/sass/base/generic";
+@forward "bulma/sass/base/animations";
 
 
-// imports from "bulma-css-variables/sass/elements/_all";
-@import "bulma-css-variables/sass/elements/box";
-@import "bulma-css-variables/sass/elements/button";
-@import "bulma-css-variables/sass/elements/container";
-@import "bulma-css-variables/sass/elements/content";
-@import "bulma-css-variables/sass/elements/icon";
-@import "bulma-css-variables/sass/elements/image";
-//@import "bulma-css-variables/sass/elements/notification"; // not used
-// @import "bulma-css-variables/sass/elements/progress"; // not used
-@import "bulma-css-variables/sass/elements/table";
-@import "bulma-css-variables/sass/elements/tag";
-@import "bulma-css-variables/sass/elements/title";
+// elements
+@forward "bulma/sass/elements/block";
+@forward "bulma/sass/elements/box";
+@forward "bulma/sass/elements/button";
+@forward "bulma/sass/elements/content";
+@forward "bulma/sass/elements/delete";
+@forward "bulma/sass/elements/icon";
+@forward "bulma/sass/elements/image";
+@forward "bulma/sass/elements/loader";
+// @forward "bulma/sass/elements/notification"; // not used
+// @forward "bulma/sass/elements/progress"; // not used
+@forward "bulma/sass/elements/table";
+@forward "bulma/sass/elements/tag";
+@forward "bulma/sass/elements/title";
 
-@import "bulma-css-variables/sass/elements/other";
+// form
+@forward "bulma/sass/form/shared";
+@forward "bulma/sass/form/input-textarea";
+@forward "bulma/sass/form/checkbox-radio";
+@forward "bulma/sass/form/select";
+@forward "bulma/sass/form/file";
+@forward "bulma/sass/form/tools";
 
+// components
+// @forward "bulma/sass/components/breadcrumb"; // not used
+@forward "bulma/sass/components/card";
+// @forward "bulma/sass/components/dropdown"; // not used
+@forward "bulma/sass/components/menu";
+// @forward "bulma/sass/components/message"; // not used
+@forward "bulma/sass/components/modal";
+@forward "bulma/sass/components/navbar";
+@forward "bulma/sass/components/pagination";
+// @forward "bulma/sass/components/panel"; // not used
+// @forward "bulma/sass/components/tabs"; // not used
 
-// imports from "bulma-css-variables/sass/form/_all";
-@import "bulma-css-variables/sass/form/shared";
-@import "bulma-css-variables/sass/form/input-textarea";
-@import "bulma-css-variables/sass/form/checkbox-radio";
-@import "bulma-css-variables/sass/form/select";
-@import "bulma-css-variables/sass/form/file";
-@import "bulma-css-variables/sass/form/tools";
+// grid
+@forward "bulma/sass/grid/columns";
+// @forward "bulma/sass/grid/grid"; // probably not used, because new
 
+// layout
+@forward "bulma/sass/layout/container";
+// @forward "bulma/sass/layout/footer"; // not used
+// @forward "bulma/sass/layout/hero"; // not used
+// @forward "bulma/sass/layout/level"; // not used
+@forward "bulma/sass/layout/media";
+// @forward "bulma/sass/layout/section"; // not used
 
-// imports from "bulma-css-variables/sass/components/_all";
-// @import "bulma-css-variables/sass/components/breadcrumb"; // not used
-@import "bulma-css-variables/sass/components/card";
-// @import "bulma-css-variables/sass/components/dropdown"; // moved to component
-// @import "bulma-css-variables/sass/components/level"; // not used
-@import "bulma-css-variables/sass/components/media"; 
-@import "bulma-css-variables/sass/components/menu";
-//@import "bulma-css-variables/sass/components/message"; // not used
-@import "bulma-css-variables/sass/components/modal";
-@import "bulma-css-variables/sass/components/navbar";
-@import "bulma-css-variables/sass/components/pagination";
-// @import "bulma-css-variables/sass/components/panel"; // not used
-// @import "bulma-css-variables/sass/components/tabs"; // not used
+// base/skeleton
+@forward "bulma/sass/base/skeleton";
 
-
-// imports from "bulma-css-variables/sass/grid/_all";
-@import "bulma-css-variables/sass/grid/columns";
-// @import "bulma-css-variables/sass/grid/tiles"; // not used
-
-
-// imports from "bulma-css-variables/sass/helpers/_all";
-@import "bulma-css-variables/sass/helpers/color";
-@import "bulma-css-variables/sass/helpers/flexbox";
-@import "bulma-css-variables/sass/helpers/float";
-// @import "bulma-css-variables/sass/helpers/other"; // not used
-// @import "bulma-css-variables/sass/helpers/overflow";
-// @import "bulma-css-variables/sass/helpers/position";
-@import "bulma-css-variables/sass/helpers/spacing";
-@import "bulma-css-variables/sass/helpers/typography";
-@import "bulma-css-variables/sass/helpers/visibility";
-
-
-// imports from "bulma-css-variables/sass/layout/_all";
-// @import "bulma-css-variables/sass/layout/hero"; // not used
-// @import "bulma-css-variables/sass/layout/section"; // not used
-// @import "bulma-css-variables/sass/layout/footer"; // not used
+// helpers
+// @forward "bulma/sass/helpers/aspect-ratio"; // probably not used, because new
+// @forward "bulma/sass/helpers/border"; // probably not used, because new
+@forward "bulma/sass/helpers/color";
+@forward "bulma/sass/helpers/flexbox";
+@forward "bulma/sass/helpers/float";
+// @forward "bulma/sass/helpers/gap"; // probably not used, because new
+// @forward "bulma/sass/helpers/overflow"; // not used
+// @forward "bulma/sass/helpers/position"; // not used
+@forward "bulma/sass/helpers/spacing";
+@forward "bulma/sass/helpers/typography";
+@forward "bulma/sass/helpers/visibility";
+// @forward "bulma/sass/helpers/other"; // not used
 
 // #################
 // END BULMA IMPORTS
 // #################
 
-@import "theme";
-@import "components";
 
-@import "custom-properties";
\ No newline at end of file
+@use "fonts";
+
+@use "transitions";
+
+@use "theme";
+@use "components";
+
+@use "custom-properties";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/frontend/src/styles/theme/_index.scss b/frontend/src/styles/theme/_index.scss
index 5ce534bbd..a6a787264 100644
--- a/frontend/src/styles/theme/_index.scss
+++ b/frontend/src/styles/theme/_index.scss
@@ -1,12 +1,12 @@
-@import "scrollbars";
+@forward "scrollbars";
 
-@import "theme";
+@forward "theme";
 
-@import "background";
-@import "content";
-@import "form";
-@import "link-share";
-@import "loading";
-@import "flatpickr";
-@import 'helpers';
-@import 'navigation';
\ No newline at end of file
+@forward "background";
+@forward "content";
+@forward "form";
+@forward "link-share";
+@forward "loading";
+@forward "flatpickr";
+@forward 'helpers';
+@forward 'navigation';
\ No newline at end of file
diff --git a/frontend/src/styles/theme/background.scss b/frontend/src/styles/theme/background.scss
index b439573ca..5362f8b68 100644
--- a/frontend/src/styles/theme/background.scss
+++ b/frontend/src/styles/theme/background.scss
@@ -1,3 +1,5 @@
+@use "@/styles/common-imports" as *;
+
 .app-container.has-background,
 .link-share-container.has-background {
   position: relative;
diff --git a/frontend/src/styles/theme/content.scss b/frontend/src/styles/theme/content.scss
index c3d8b60fe..05147af78 100644
--- a/frontend/src/styles/theme/content.scss
+++ b/frontend/src/styles/theme/content.scss
@@ -1,3 +1,5 @@
+@use "@/styles/common-imports" as *;
+
 .content h3 {
 	.icon,
 	.is-small {
diff --git a/frontend/src/styles/theme/form.scss b/frontend/src/styles/theme/form.scss
index 0a2e5780a..6c56f65e4 100644
--- a/frontend/src/styles/theme/form.scss
+++ b/frontend/src/styles/theme/form.scss
@@ -1,3 +1,6 @@
+@use 'sass:list';
+@use "@/styles/common-imports" as *;
+
 .field.has-addons .button {
   height: 2.5rem;
   margin-left: 0 !important;
@@ -20,8 +23,8 @@
   }
 
   @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
+    $color: list.nth($pair, 1);
+    $color-invert: list.nth($pair, 2);
 
     &.is-#{$name} {
       &.is-active,
@@ -85,8 +88,8 @@
   padding: .3rem;
 
   &:focus {
-    background: $input-background-color;
-    border-color: $input-focus-border-color;
+    background: $scheme-main;
+    border-color: $link;
   }
 
   &.disabled {
diff --git a/frontend/src/styles/theme/link-share.scss b/frontend/src/styles/theme/link-share.scss
index ee46bdddb..c50a34961 100644
--- a/frontend/src/styles/theme/link-share.scss
+++ b/frontend/src/styles/theme/link-share.scss
@@ -1,3 +1,5 @@
+@use "@/styles/common-imports" as *;
+
 .field.has-addons.no-input-mobile {
   .control:first-child {
     width: 100%;
diff --git a/frontend/src/styles/theme/loading.scss b/frontend/src/styles/theme/loading.scss
index c7c7093ea..892eb43fb 100644
--- a/frontend/src/styles/theme/loading.scss
+++ b/frontend/src/styles/theme/loading.scss
@@ -1,3 +1,5 @@
+@use "bulma/sass/utilities/mixins.scss" as *;
+
 // FIXME: move to Loading.vue 
 .loader-container.is-loading {
   position: relative;
diff --git a/frontend/src/styles/theme/navigation.scss b/frontend/src/styles/theme/navigation.scss
index aef12198a..c571e4ce5 100644
--- a/frontend/src/styles/theme/navigation.scss
+++ b/frontend/src/styles/theme/navigation.scss
@@ -1,3 +1,5 @@
+@use "@/styles/common-imports" as *;
+
 // these are general menu styles
 // should be in own components
 .menu {
diff --git a/frontend/src/styles/theme/scrollbars.scss b/frontend/src/styles/theme/scrollbars.scss
index c985376ee..6aae500dd 100644
--- a/frontend/src/styles/theme/scrollbars.scss
+++ b/frontend/src/styles/theme/scrollbars.scss
@@ -1,3 +1,5 @@
+@use "@/styles/common-imports" as *;
+
 $scrollbar-height: 8px;
 $scrollbar-track-color: var(--grey-200);
 $scrollbar-thumb-color: var(--grey-300);
diff --git a/frontend/src/styles/theme/theme.scss b/frontend/src/styles/theme/theme.scss
index 9574ccb41..475b866f7 100644
--- a/frontend/src/styles/theme/theme.scss
+++ b/frontend/src/styles/theme/theme.scss
@@ -1,3 +1,5 @@
+@use "@/styles/common-imports" as *;
+
 *,
 *:hover,
 *:active,
diff --git a/frontend/src/styles/transitions.scss b/frontend/src/styles/transitions.scss
index 19de9dd3d..97e01faef 100644
--- a/frontend/src/styles/transitions.scss
+++ b/frontend/src/styles/transitions.scss
@@ -1,3 +1,5 @@
+@use "@/styles/common-imports" as *;
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity $transition-duration;
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 11c156152..d128406f0 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -22,7 +22,7 @@ const pathSrc = fileURLToPath(new URL('./src', import.meta.url)).replaceAll('\\'
 
 // the @use rules have to be the first in the compiled stylesheets
 const PREFIXED_SCSS_STYLES = `@use "sass:math";
-@import "${pathSrc}/styles/common-imports.scss";`
+@use "${pathSrc}/styles/common-imports.scss" as *;`
 
 const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
 const legacy = isModernBuild
@@ -93,6 +93,9 @@ export default defineConfig(({mode}) => {
 		},
 		css: {
 			preprocessorOptions: {
+				// sass: {
+				// 	api: 'modern-compiler',
+				// },
 				scss: {
 					api: 'modern-compiler',
 					additionalData: PREFIXED_SCSS_STYLES,