update sass imports to use @use syntax

Steve-Mcl · Steve-Mcl · commit 0b62d58edd36 · 2026-03-09T12:30:59.000Z
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -148,5 +148,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./stylesheets/common.scss";
+@use "./stylesheets/common.scss" as *;
 </style>
diff --git a/frontend/src/SetupApp.vue b/frontend/src/SetupApp.vue
@@ -67,5 +67,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./stylesheets/common.scss";
+@use "./stylesheets/common.scss" as *;
 </style>
diff --git a/frontend/src/components/CodePreviewer.vue b/frontend/src/components/CodePreviewer.vue
@@ -20,5 +20,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../stylesheets/components/code-previewer.scss";
+@use "../stylesheets/components/code-previewer.scss" as *;
 </style>
diff --git a/frontend/src/components/EmptyState.vue b/frontend/src/components/EmptyState.vue
@@ -52,5 +52,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../stylesheets/components/empty-state.scss";
+@use "../stylesheets/components/empty-state.scss" as *;
 </style>
diff --git a/frontend/src/components/InfoCard.vue b/frontend/src/components/InfoCard.vue
@@ -23,5 +23,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../stylesheets/components/info-card.scss";
+@use "../stylesheets/components/info-card.scss" as *;
 </style>
diff --git a/frontend/src/components/InterviewPopup.vue b/frontend/src/components/InterviewPopup.vue
@@ -77,5 +77,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../stylesheets/components/notifications.scss";
+@use "../stylesheets/components/notifications.scss" as *;
 </style>
diff --git a/frontend/src/components/TeamSelection.vue b/frontend/src/components/TeamSelection.vue
@@ -127,7 +127,7 @@ export default {
 }
 </script>
 <style lang="scss">
-@import "../stylesheets/components/team-list.scss";
+@use "../stylesheets/components/team-list.scss" as *;
 
 .ff-team-selection {
     &.ff-listbox {
diff --git a/frontend/src/components/audit-log/AuditLog.vue b/frontend/src/components/audit-log/AuditLog.vue
@@ -124,6 +124,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../stylesheets/components/audit-log.scss";
-@import "../../stylesheets/components/accordion.scss";
+@use "../../stylesheets/components/audit-log.scss" as *;
+@use "../../stylesheets/components/accordion.scss" as *;
 </style>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
@@ -256,5 +256,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../stylesheets/pages/login.scss";
+@use "../stylesheets/pages/login.scss" as *;
 </style>
diff --git a/frontend/src/pages/admin/index.vue b/frontend/src/pages/admin/index.vue
@@ -33,5 +33,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../stylesheets/pages/admin.scss";
+@use "../../stylesheets/pages/admin.scss" as *;
 </style>
diff --git a/frontend/src/pages/application/DeviceGroups.vue b/frontend/src/pages/application/DeviceGroups.vue
@@ -236,5 +236,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../stylesheets/components/pipelines.scss";
+@use "../../stylesheets/components/pipelines.scss" as *;
 </style>
diff --git a/frontend/src/pages/application/Pipelines.vue b/frontend/src/pages/application/Pipelines.vue
@@ -461,5 +461,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../stylesheets/components/pipelines.scss";
+@use "../../stylesheets/components/pipelines.scss" as *;
 </style>
diff --git a/frontend/src/pages/instance/Blueprints/BlueprintSelection.vue b/frontend/src/pages/instance/Blueprints/BlueprintSelection.vue
@@ -82,7 +82,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../stylesheets/components/blueprint-selection.scss';
+@use '../../../stylesheets/components/blueprint-selection.scss' as *;
 .blueprint-group {
   display: flex;
   flex-wrap: wrap;
diff --git a/frontend/src/pages/instance/Overview.vue b/frontend/src/pages/instance/Overview.vue
@@ -279,7 +279,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../stylesheets/pages/project.scss";
+@use "../../stylesheets/pages/project.scss" as *;
 
 // Container query for drawer context
 // Breakpoint matches DRAWER_MOBILE_BREAKPOINT constant in Editor/index.vue
diff --git a/frontend/src/pages/team/Applications/index.vue b/frontend/src/pages/team/Applications/index.vue
@@ -195,7 +195,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../stylesheets/components/applications-list";
+@use "../../../stylesheets/components/applications-list" as *;
 
 .no-results {
   text-align: center;

Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,7 @@ export default {`
`127`	`127`	`}`
`128`	`128`	`</script>`
`129`	`129`	`<style lang="scss">`
`130`		`-@import "../stylesheets/components/team-list.scss";`
	`130`	`+@use "../stylesheets/components/team-list.scss" as *;`
`131`	`131`
`132`	`132`	`.ff-team-selection {`
`133`	`133`	`&.ff-listbox {`