diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 92931c5dd..bdff1144b 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -253,8 +253,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	@import '../../css/animations';
-	@import '../../css/variables';
+	@use '../../css/animations';
+	@use '../../css/variables';
 
 	form {
 		text-align: center;
@@ -282,7 +282,7 @@ export default {
 	}
 
 	.board {
-		padding-left: $board-spacing;
+		padding-left: variables.$board-spacing;
 		position: relative;
 		max-height: calc(100% - var(--default-clickable-area));
 		overflow: hidden;
@@ -313,8 +313,8 @@ export default {
 					display: flex;
 					flex-direction: column;
 					// Margin left instead of padidng to avoid jumps on dropping a card
-					margin-left: $stack-spacing;
-					padding-right: $stack-spacing;
+					margin-left: variables.$stack-spacing;
+					padding-right: variables.$stack-spacing;
 					overflow-x: hidden;
 					overflow-y: auto;
 					padding-top: 15px;
diff --git a/src/components/cards/CardCover.vue b/src/components/cards/CardCover.vue
index 67dc0a167..5282ae061 100644
--- a/src/components/cards/CardCover.vue
+++ b/src/components/cards/CardCover.vue
@@ -72,7 +72,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../css/variables';
+@use '../../css/variables';
 
 .card-cover {
 	height: 90px;
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 379a5cb86..101b78be3 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -331,7 +331,7 @@ export default {
 		border-radius: var(--border-radius-large);
 		font-size: 100%;
 		background-color: var(--color-main-background);
-		margin-bottom: $card-spacing;
+		margin-bottom: variables.$card-spacing;
 		padding: var(--default-grid-baseline) variables.$card-padding;
 		border: 2px solid var(--color-border-dark);
 		width: 100%;
@@ -470,7 +470,7 @@ export default {
 			width: 32px;
 		}
 		&.has-labels {
-			padding-bottom: $card-padding;
+			padding-bottom: variables.$card-padding;
 		}
 		.labels {
 			height: 6px;
diff --git a/src/components/overview/Overview.vue b/src/components/overview/Overview.vue
index 0b8269e20..49fe20d2b 100644
--- a/src/components/overview/Overview.vue
+++ b/src/components/overview/Overview.vue
@@ -145,7 +145,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './../../css/variables';
+@use './../../css/variables';
 
 .overview-wrapper {
 	position: relative;
@@ -162,16 +162,16 @@ export default {
 	overflow-x: scroll;
 	display: flex;
 	align-items: stretch;
-	padding-left: $board-spacing;
-	padding-right: $board-spacing;
+	padding-left: variables.$board-spacing;
+	padding-right: variables.$board-spacing;
 
 	.dashboard-column {
 		display: flex;
 		flex-direction: column;
-		min-width: $stack-width;
-		width: $stack-width;
-		margin-left: $stack-spacing;
-		margin-right: $stack-spacing;
+		min-width: variables.$stack-width;
+		width: variables.$stack-width;
+		margin-left: variables.$stack-spacing;
+		margin-right: variables.$stack-spacing;
 
 		h3 {
 			font-size: var(--default-font-size);
diff --git a/src/components/search/GlobalSearchResults.vue b/src/components/search/GlobalSearchResults.vue
index 93b028204..d8279e3ad 100644
--- a/src/components/search/GlobalSearchResults.vue
+++ b/src/components/search/GlobalSearchResults.vue
@@ -162,11 +162,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../css/variables';
+@use '../../css/variables';
 
 .global-search {
 	width: 100%;
-	padding: $board-spacing + $stack-spacing;
+	padding: variables.$board-spacing + variables.$stack-spacing;
 	padding-bottom: 0;
 	overflow: hidden;
 	min-height: 35vh;
@@ -214,8 +214,8 @@ export default {
 	}
 
 	&:deep(.card) {
-		width: $stack-width;
-		margin-right: $stack-spacing;
+		width: variables.$stack-width;
+		margin-right: variables.$stack-spacing;
 	}
 }
 </style>
diff --git a/src/components/search/Placeholder.vue b/src/components/search/Placeholder.vue
index 0921891fd..8e17a8adc 100644
--- a/src/components/search/Placeholder.vue
+++ b/src/components/search/Placeholder.vue
@@ -58,18 +58,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../css/variables';
+@use '../../css/variables';
 $clickable-area: var(--default-clickable-area);
 
 .card--placeholder {
-	width: $stack-width;
-	margin-right: $stack-spacing;
-	padding: $card-padding;
+	width: variables.$stack-width;
+	margin-right: variables.$stack-spacing;
+	padding: variables.$card-padding;
 	transition: box-shadow 0.1s ease-in-out;
 	box-shadow: 0 0 2px 0 var(--color-box-shadow);
 	border-radius: var(--border-radius-large);
 	font-size: 100%;
-	margin-bottom: $card-spacing;
+	margin-bottom: variables.$card-spacing;
 	height: 100px;
 }