Migrate from @import to @use in SASS

m-mohr · m-mohr · commit b046cde97d9e · 2025-04-23T13:50:33.000+02:00
diff --git a/components/BillingPlans.vue b/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 {
diff --git a/components/Capabilities.vue b/components/Capabilities.vue
@@ -104,5 +104,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/Collection.vue b/components/Collection.vue
@@ -301,7 +301,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.collection {
 	.keywords {
diff --git a/components/Collections.vue b/components/Collections.vue
@@ -123,5 +123,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/DeprecationNotice.vue b/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);
diff --git a/components/Description.vue b/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;
diff --git a/components/ExperimentalNotice.vue b/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);
diff --git a/components/FederationMissingNotice.vue b/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);
diff --git a/components/FileFormat.vue b/components/FileFormat.vue
@@ -93,5 +93,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/FileFormats.vue b/components/FileFormats.vue
@@ -147,5 +147,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/Item.vue b/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 {
diff --git a/components/Items.vue b/components/Items.vue
@@ -200,7 +200,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.items {
 	.map.overview {
diff --git a/components/Job.vue b/components/Job.vue
@@ -158,7 +158,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.job {
 	.progressBar {
diff --git a/components/JobEstimate.vue b/components/JobEstimate.vue
@@ -83,5 +83,5 @@ export default {
 
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/JsonSchema.vue b/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;
diff --git a/components/LinkList.vue b/components/LinkList.vue
@@ -53,5 +53,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/Logs.vue b/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 {
 
diff --git a/components/ObjectTree.vue b/components/ObjectTree.vue
@@ -116,7 +116,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.object-tree {
 	.inline {
diff --git a/components/Process.vue b/components/Process.vue
@@ -202,7 +202,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.process {
 	.namespace {
diff --git a/components/Processes.vue b/components/Processes.vue
@@ -120,5 +120,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/SearchBox.vue b/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;
diff --git a/components/SearchableList.vue b/components/SearchableList.vue
@@ -344,7 +344,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.searchable-list {
 
diff --git a/components/Service.vue b/components/Service.vue
@@ -164,5 +164,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/ServiceType.vue b/components/ServiceType.vue
@@ -95,5 +95,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/ServiceTypes.vue b/components/ServiceTypes.vue
@@ -94,5 +94,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/SupportedFeatures.vue b/components/SupportedFeatures.vue
@@ -106,7 +106,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.features {
     ul {
diff --git a/components/Tabs.vue b/components/Tabs.vue
@@ -265,7 +265,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.tabs {
 	display: flex;
diff --git a/components/UdfRuntime.vue b/components/UdfRuntime.vue
@@ -124,7 +124,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 
 .vue-component.udf-runtime {
 	h4 {
diff --git a/components/UdfRuntimes.vue b/components/UdfRuntimes.vue
@@ -109,5 +109,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import './base.scss';
+@use './base.scss';
 </style>
diff --git a/components/internal/FederationNotice.vue b/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);
diff --git a/components/internal/StacFields.vue b/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;
