Update CSS imports to fix deprecation warnings

Author: m-mohr

src/Page.vue

@@ -19,6 +19,7 @@
 import EventBusMixin from './components/EventBusMixin.js';
 import Utils from './utils';
 import ConnectForm from './components/ConnectForm.vue';
+import "fontsource-ubuntu/index.css";
 
 export default {
 	name: 'openeo-web-editor',
@@ -202,8 +203,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "fontsource-ubuntu/index.css";
-@import '../theme.scss';
+@use '../theme' as *;
 
 html, body, .container {
 	height: 100%;

src/components/ConnectForm.vue

@@ -455,7 +455,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../theme.scss';
+@use '../../theme' as *;
 
 .connectPage {
 	background-color: $mainColor;

src/components/DiscoveryToolbar.vue

@@ -221,7 +221,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import '../../theme.scss';
+@use '../../theme' as *;
 
 .discovery-toolbar {
 	width: 100%;

src/components/IDE.vue

@@ -58,6 +58,7 @@ import { Job, Service, UserProcess } from '@openeo/js-client';
 import { Splitpanes, Pane } from 'splitpanes';
 import BButton from '@openeo/vue-components/components/internal/BButton.vue';
 import AsyncButton from '@openeo/vue-components/components/internal/AsyncButton.vue';
+import 'splitpanes/dist/splitpanes.css';
 
 export default {
 	name: 'IDE',
@@ -322,8 +323,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../theme.scss';
-@import '~splitpanes/dist/splitpanes.css';
+@use '../../theme' as *;
 
 .splitpanes.default-theme {
   .splitpanes__pane {

src/components/Logo.vue

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

src/components/Parameters.vue

@@ -150,7 +150,7 @@ export default {
 </style>
 
 <style lang="scss">
-@import '../../theme.scss';
+@use '../../theme' as *;
 
 .parameters {
 	.fieldRow {

src/components/Tour.vue

@@ -6,6 +6,7 @@
 import Utils from '../utils.js';
 import VueTour from 'vue-tour';
 import Vue from 'vue';
+import 'vue-tour/dist/vue-tour.css';
 
 Vue.use(VueTour);
 
@@ -178,8 +179,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~vue-tour/dist/vue-tour.css';
-@import '../../theme.scss';
+@use '../../theme' as *;
 
 .web-editor-tour {
 	.v-step {

src/components/datatypes/SelectBox.vue

@@ -348,7 +348,7 @@ export default {
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 
 <style lang="scss">
-@import '../../../theme.scss';
+@use '../../../theme' as *;
 
 .select-container {
 	display: flex;

src/components/modals/Modal.vue

@@ -175,7 +175,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../theme.scss';
+@use '../../../theme' as *;
 
 .modal {
 	position: fixed;

src/components/modals/WizardModal.vue

@@ -367,7 +367,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../theme.scss';
+@use '../../../theme' as *;
 #WizardModal .modal-container {
 	height: 90%;
 }