Merge pull request #6831 from FlowFuse/6731-sass-imports

Steve-Mcl · web-flow · commit fcfbdccffe04 · 2026-03-10T10:19:11.000Z
chore: change deprecated sass imports to use/forward syntax
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -88,11 +88,7 @@ module.exports = function (env, argv) {
                         {
                             loader: 'sass-loader',
                             options: {
-                                additionalData: '@import "@/ui-components/stylesheets/ff-colors.scss";@import "@/ui-components/stylesheets/ff-utility.scss";',
-                                sassOptions: {
-                                    // Silence warnings about @import deprecation
-                                    silenceDeprecations: ['import']
-                                }
+                                additionalData: '@use "@/ui-components/stylesheets/ff-colors.scss" as *;@use "@/ui-components/stylesheets/ff-utility.scss" as *;'
                             }
                         }
 
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/Accordion.vue b/frontend/src/components/Accordion.vue
@@ -89,3 +89,7 @@ export default {
     }
 }
 </script>
+
+<style lang="scss">
+@use "../stylesheets/components/accordion.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/IconLink.vue b/frontend/src/components/IconLink.vue
@@ -37,9 +37,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../ui-components/stylesheets/ff-colors.scss';
-@import '../ui-components/stylesheets/ff-utility.scss';
-
 .ff-icon-link {
 display: flex;
 justify-content: space-between;
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,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../stylesheets/components/audit-log.scss";
-@import "../../stylesheets/components/accordion.scss";
+@use "../../stylesheets/components/audit-log.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;
diff --git a/frontend/src/pages/team/components/ApplicationSummaryLabel.vue b/frontend/src/pages/team/components/ApplicationSummaryLabel.vue
@@ -87,9 +87,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../ui-components/stylesheets/ff-colors.scss';
-@import '../../../ui-components/stylesheets/ff-utility.scss';
-
 .ff-icon-link {
   display: flex;
   justify-content: space-between;
diff --git a/frontend/src/stylesheets/common.scss b/frontend/src/stylesheets/common.scss
@@ -1,9 +1,9 @@
-@import '../ui-components/stylesheets/ff-colors.scss';
+@use '../ui-components/stylesheets/ff-colors.scss' as *;
 
-@import "./layouts.scss";
-@import "./transitions.scss";
-@import "./animations.scss";
-@import "./components/charts.scss";
+@use "./layouts.scss" as *;
+@use "./transitions.scss" as *;
+@use "./animations.scss" as *;
+@use "./components/charts.scss" as *;
 
 /* Define Font Family */
 /* latin */
diff --git a/frontend/src/stylesheets/components/accordion.scss b/frontend/src/stylesheets/components/accordion.scss
@@ -1,3 +1,5 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
 .ff-accordion {
     margin-bottom: 24px;
     &--button {
diff --git a/frontend/src/stylesheets/components/applications-list.scss b/frontend/src/stylesheets/components/applications-list.scss
@@ -1,3 +1,6 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+@use "../../ui-components/stylesheets/ff-utility.scss" as *;
+
 .ff-applications-list {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/stylesheets/components/audit-log.scss b/frontend/src/stylesheets/components/audit-log.scss
@@ -1,3 +1,6 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+@use "../../ui-components/stylesheets/ff-utility.scss" as *;
+
 .ff-audit-entry {
     display: grid;
     grid-template-areas:
diff --git a/frontend/src/stylesheets/components/blueprint-selection.scss b/frontend/src/stylesheets/components/blueprint-selection.scss
@@ -1,3 +1,6 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+@use "../../ui-components/stylesheets/ff-utility.scss" as *;
+
 .ff-blueprint-groups {
     h4 {
         border-bottom: 1px solid $ff-grey-200;
diff --git a/frontend/src/stylesheets/components/charts.scss b/frontend/src/stylesheets/components/charts.scss
@@ -1,3 +1,5 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
 .ff-chart {
     padding: 8px 18px;
     border: 1px solid $ff-grey-300;
diff --git a/frontend/src/stylesheets/components/code-previewer.scss b/frontend/src/stylesheets/components/code-previewer.scss
@@ -1,3 +1,5 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
 .ff-code-previewer {
     background-color: white;
     border: 1px solid $ff-grey-300;
diff --git a/frontend/src/stylesheets/components/empty-state.scss b/frontend/src/stylesheets/components/empty-state.scss
@@ -1,3 +1,5 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
 .ff-empty-state {
     text-align: center;
     padding-top: 64px;
diff --git a/frontend/src/stylesheets/components/info-card.scss b/frontend/src/stylesheets/components/info-card.scss
@@ -1,3 +1,5 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
 .ff-info-card h3 {
     display: flex;
     gap: 9px;
diff --git a/frontend/src/stylesheets/components/notifications.scss b/frontend/src/stylesheets/components/notifications.scss
@@ -1,3 +1,5 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
 .ff-notification-interview {
   max-width: 450px;
   background-color: $ff-white;
diff --git a/frontend/src/stylesheets/components/pipelines.scss b/frontend/src/stylesheets/components/pipelines.scss
@@ -1,3 +1,6 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+@use "../../ui-components/stylesheets/ff-utility.scss" as *;
+
 .ff-pipeline {
     width: 100%;
     border: 1px solid $ff-grey-300;
diff --git a/frontend/src/stylesheets/components/team-list.scss b/frontend/src/stylesheets/components/team-list.scss
@@ -1,4 +1,6 @@
- .ff-dropdown-option-list {
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
+.ff-dropdown-option-list {
   max-height: 200px;
   overflow-y: auto;
 }
diff --git a/frontend/src/stylesheets/layouts.scss b/frontend/src/stylesheets/layouts.scss
@@ -1,11 +1,10 @@
+@use '../ui-components/stylesheets/ff-colors.scss' as *;
+@use '../ui-components/stylesheets/ff-utility.scss' as *;
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import '../ui-components/stylesheets/ff-colors.scss';
-@import '../ui-components/stylesheets/ff-utility.scss';
-
 $sidenav_width: 250px;
 $transition_time: .15s;
 
diff --git a/frontend/src/stylesheets/pages/project.scss b/frontend/src/stylesheets/pages/project.scss
@@ -1,3 +1,6 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+@use "../../ui-components/stylesheets/ff-utility.scss" as *;
+
 .ff-project-overview {
     .ff-accordion--content {
         transition: none;
diff --git a/frontend/src/ui-components/index.scss b/frontend/src/ui-components/index.scss
@@ -1,12 +1,12 @@
 // use tailwind to reset all CSS - saves us a lot of work
 // @tailwind base;
 
-@import "./stylesheets/ff-colors.scss";
-@import "./stylesheets/ff-utility.scss";
-@import "./stylesheets/ff-core.scss";
-@import "./stylesheets/ff-components.scss";
 
-@import "./stylesheets/ff-theme-light.scss";
-@import "./stylesheets/ff-theme-dark.scss";
 
-@import "./stylesheets/ff-immersive-editor.scss";
+@use "./stylesheets/ff-colors.scss" as *;
+@use "./stylesheets/ff-utility.scss" as *;
+@use "./stylesheets/ff-core.scss" as *;
+@use "./stylesheets/ff-components.scss" as *;
+@use "./stylesheets/ff-theme-light.scss" as *;
+@use "./stylesheets/ff-theme-dark.scss" as *;
+@use "./stylesheets/ff-immersive-editor.scss" as *;
diff --git a/frontend/src/ui-components/stylesheets/ff-components.scss b/frontend/src/ui-components/stylesheets/ff-components.scss
@@ -1,3 +1,6 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+@use "../../ui-components/stylesheets/ff-utility.scss" as *;
+
 /*
   ff-core contains styling on the custom, ff components
 */
diff --git a/frontend/src/ui-components/stylesheets/ff-core.scss b/frontend/src/ui-components/stylesheets/ff-core.scss
@@ -1,3 +1,6 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+@use "../../ui-components/stylesheets/ff-utility.scss" as *;
+
 /*
   ff-core contains styling on the fundamental HTML elements
 */
diff --git a/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss b/frontend/src/ui-components/stylesheets/ff-immersive-editor.scss
@@ -1,3 +1,5 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
 .ff--immersive-editor-wrapper {
   position: relative;
   height: 100%;
diff --git a/frontend/src/ui-components/stylesheets/ff-theme-dark.scss b/frontend/src/ui-components/stylesheets/ff-theme-dark.scss
@@ -1,3 +1,5 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
 .ff-bg-dark {
     background-color: $ff-grey-800;
 }
diff --git a/frontend/src/ui-components/stylesheets/ff-theme-light.scss b/frontend/src/ui-components/stylesheets/ff-theme-light.scss
@@ -1,3 +1,5 @@
+@use "../../ui-components/stylesheets/ff-colors.scss" as *;
+
 .ff-bg-light {
     background-color: $ff-grey-50;
 }

Original file line number	Diff line number	Diff line change
`@@ -88,11 +88,7 @@ module.exports = function (env, argv) {`
`88`	`88`	`{`
`89`	`89`	`loader: 'sass-loader',`
`90`	`90`	`options: {`
`91`		`- additionalData: '@import "@/ui-components/stylesheets/ff-colors.scss";@import "@/ui-components/stylesheets/ff-utility.scss";',`
`92`		`- sassOptions: {`
`93`		`- // Silence warnings about @import deprecation`
`94`		`- silenceDeprecations: ['import']`
`95`		`- }`
	`91`	`+ additionalData: '@use "@/ui-components/stylesheets/ff-colors.scss" as ;@use "@/ui-components/stylesheets/ff-utility.scss" as ;'`
`96`	`92`	`}`
`97`	`93`	`}`
`98`	`94`
Original file line number	Diff line number	Diff line change
`@@ -89,3 +89,7 @@ export default {`
`89`	`89`	`}`
`90`	`90`	`}`
`91`	`91`	`</script>`
	`92`	`+`
	`93`	`+<style lang="scss">`
	`94`	`+@use "../stylesheets/components/accordion.scss" as *;`
	`95`	`+</style>`
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 {`