Migrate from @import to @use in SASS

Author: m-mohr

components/BillingPlans.vue

@@ -68,7 +68,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.billing-plans {
 	> ul > li {

components/Capabilities.vue

@@ -104,5 +104,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/Collection.vue

@@ -301,7 +301,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.collection {
 	.keywords {

components/Collections.vue

@@ -123,5 +123,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/DeprecationNotice.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.deprecation-notice {
 	background-color: rgb(255,0,0,0.1);

components/Description.vue

@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.styled-description {
 	line-height: 1.25em;

components/ExperimentalNotice.vue

@@ -20,7 +20,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.experimental-notice {
 	background-color: rgb(138,43,226,0.1);

components/FederationMissingNotice.vue

@@ -60,7 +60,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.federation-backends {
 	background-color: rgba(255, 69, 0, 0.1);

components/FileFormat.vue

@@ -93,5 +93,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/FileFormats.vue

@@ -147,5 +147,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/Item.vue

@@ -112,7 +112,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.stac {
 	.metadata .map.value {

components/Items.vue

@@ -200,7 +200,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.items {
 	.map.overview {

components/Job.vue

@@ -158,7 +158,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.job {
 	.progressBar {

components/JobEstimate.vue

@@ -83,5 +83,5 @@ export default {
 
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/JsonSchema.vue

@@ -260,7 +260,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component .json-schema {
 	border-left: 5px solid #ccc;

components/LinkList.vue

@@ -53,5 +53,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/Logs.vue

@@ -123,7 +123,7 @@ export default {
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.logs {
 

components/ObjectTree.vue

@@ -116,7 +116,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.object-tree {
 	.inline {

components/Process.vue

@@ -202,7 +202,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.process {
 	.namespace {

components/Processes.vue

@@ -120,5 +120,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/SearchBox.vue

@@ -51,7 +51,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.search-box {
     margin: 0 1px 1em 0;

components/SearchableList.vue

@@ -344,7 +344,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.searchable-list {
 

components/Service.vue

@@ -164,5 +164,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/ServiceType.vue

@@ -95,5 +95,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/ServiceTypes.vue

@@ -94,5 +94,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/SupportedFeatures.vue

@@ -106,7 +106,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.features {
     ul {

components/Tabs.vue

@@ -265,7 +265,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.tabs {
 	display: flex;

components/UdfRuntime.vue

@@ -124,7 +124,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.udf-runtime {
 	h4 {

components/UdfRuntimes.vue

@@ -109,5 +109,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>

components/internal/FederationNotice.vue

@@ -62,7 +62,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../base.scss';
+@use '../base.scss';
 
 .vue-component.federation-backends {
 	background-color: rgba(184, 134, 11, 0.1);

components/internal/StacFields.vue

@@ -141,7 +141,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../base.scss';
+@use '../base.scss';
 .vue-component.stac-fields {
 	> .group {
 		margin-left: 1em;