refactor(vue3): update scss @import to @use

Signed-off-by: grnd-alt <git@belakkaf.net>

Author: grnd-alt

src/App.vue

@@ -157,7 +157,7 @@ export default {
 </style>
 
 <style lang="scss">
-	@import '../css/print.scss';
+	@use '../css/print.scss';
 
 	.icon-activity {
 		background-image: url(../img/activity-dark.svg);

src/components/ActivityList.vue

@@ -6,7 +6,7 @@
 <template>
 	<div class="activity-list">
 		<div v-if="isLoading" class="icon icon-loading" />
-		<div v-infinite-scroll="[loadMore, { canLoadMore: canLoadMore }]">
+		<div v-v-infinite-scroll="[loadMore, { canLoadMore: canLoadMore }]">
 			<ActivityEntry v-for="activity in activities"
 				:key="activity.activity_id"
 				:activity="activity" />

src/components/Controls.vue

@@ -547,7 +547,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	@import '../css/variables.scss';
+	@use '../css/variables.scss' as *;
 
 	.controls {
 		display: flex;

src/components/board/Board.vue

@@ -278,8 +278,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	@import '../../css/animations.scss';
-	@import '../../css/variables.scss';
+	@use '../../css/animations.scss';
+	@use '../../css/variables.scss' as *;
 
 	form {
 		text-align: center;

src/components/board/Stack.vue

@@ -403,7 +403,7 @@ export default {
 
 	@use 'sass:math';
 
-	@import './../../css/variables.scss';
+	@use './../../css/variables.scss' as *;
 
 	.stack {
 		width: 100%;

src/components/card/AssignmentSelector.vue

@@ -124,5 +124,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../css/selector.scss';
+@use '../../css/selector.scss';
 </style>

src/components/card/CardDetailEntry.vue

@@ -27,5 +27,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import '../../css/selector.scss';
+@use '../../css/selector.scss';
 </style>

src/components/card/CardSidebarTabComments.vue

@@ -19,7 +19,7 @@
 		<CommentForm v-model="newComment" @submit="createComment" />
 
 		<ul v-if="commentStore.getCommentsForCard(card.id).length > 0" id="commentsFeed">
-			<div v-infinite-scroll="[infiniteHandler, {canLoadMore: () => commentStore.hasMoreComments(card.id)}]">
+			<div v-v-infinite-scroll="[infiniteHandler, {canLoadMore: () => commentStore.hasMoreComments(card.id)}]">
 				<CommentItem v-for="comment in commentStore.getCommentsForCard(card.id)"
 					:key="comment.id"
 					:comment="comment"
@@ -155,5 +155,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import '../../css/comments.scss';
+	@use '../../css/comments.scss';
 </style>

src/components/card/CommentForm.vue

@@ -109,7 +109,7 @@ export default {
 </script>
 
 <style lang="scss">
-	@import '../../css/comments.scss';
+	@use '../../css/comments.scss';
 
 	[class^="_tribute-container-autocomplete_"],
 	[class*=" _tribute-container-autocomplete_"],

src/components/card/CommentItem.vue

@@ -214,7 +214,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-	@import '../../css/comments.scss';
+	@use '../../css/comments.scss';
 
 	.reply {
 		margin: 0 0 0 var(--default-clickable-area);