diff --git a/astro.config.mjs b/astro.config.mjs
index 0ea3e5d1d4..e1d9c4fdd6 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -74,6 +74,14 @@ export default defineConfig({
     rollupOptions: {
       external: ["/src/scripts/*"],
     },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          //Break build on @import.  We use @use instead.  See #1309
+          fatalDeprecations: ['import'],
+        },
+      },
+    },
   },
   image: {
     domains: ["openprocessing.org"],
diff --git a/src/components/Dropdown/styles.module.scss b/src/components/Dropdown/styles.module.scss
index 2cd61bfc12..d5ab44b2fb 100644
--- a/src/components/Dropdown/styles.module.scss
+++ b/src/components/Dropdown/styles.module.scss
@@ -1,4 +1,4 @@
-@import "/styles/variables.scss";
+@use "styles/variables.scss";
 
 .container {
   position: relative;
@@ -62,11 +62,11 @@
 .icon {
   left: 10px;
   top: 8px;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     left: 11px;
     top: 8px;
   }
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     left: 11px;
     top: 10px;
   }
@@ -76,7 +76,7 @@
   left: 10px;
   top: 8px;
 
-  @media (min-width: $breakpoint-laptop) {
+  @media (min-width: variables.$breakpoint-laptop) {
     left: 11px;
     top: 10px;
   }
@@ -85,11 +85,11 @@
 .chevron {
   right: 10px;
   top: 12px;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     right: 12px;
     top: 14px;
   }
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     right: 12px;
     top: 16px;
   }
@@ -125,7 +125,7 @@ button.chevron {
   // 0.75rem font-size for mobile to fit content in smaller screens
   font-size: 0.75rem;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1rem;
     padding-right: 10px;
   }
diff --git a/src/components/Nav/styles.module.scss b/src/components/Nav/styles.module.scss
index 9171252f57..601222f5ac 100644
--- a/src/components/Nav/styles.module.scss
+++ b/src/components/Nav/styles.module.scss
@@ -1,10 +1,10 @@
-@import "/styles/variables.scss";
-@import "/styles/global.scss";
+@use "styles/variables.scss";
+@use "styles/global.scss";
 
 .container {
   height: fit-content;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     position: fixed;
     border-right-width: 1px;
     border-color: var(--sidebar-type-color);
@@ -49,7 +49,7 @@
     margin-bottom: var(--spacing-xs);
   }
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     display: grid;
     grid-auto-flow: column;
     grid-template-columns: 1fr;
@@ -104,14 +104,14 @@
       height: 1rem;
       width: 1.25rem;
     }
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       display: none !important;
     }
   }
 
   .desktopMenuLabel {
     display: none;
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       display: block;
       margin-top: 7.5px;
     }
@@ -122,7 +122,7 @@
       display: flex;
     }
     .desktopMenuLabel {
-      @media (min-width: $breakpoint-tablet) {
+      @media (min-width: variables.$breakpoint-tablet) {
         display: none;
       }
     }
@@ -175,7 +175,7 @@
     padding: var(--spacing-xs) 1.25rem;
   }
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     height: fit-content;
     border-top-width: 1px;
     margin-top: auto;
@@ -217,7 +217,7 @@
   line-height: 1.167;
   -webkit-text-stroke-width: 0.15px;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1.25rem;
     line-height: 1.2;
     -webkit-text-stroke-width: 0.15px;
@@ -244,7 +244,7 @@
     -webkit-text-stroke-width: 0.05px;
   }
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     &:global(.small) {
       // text-body-caption
       font-size: 0.875rem;
@@ -270,7 +270,7 @@
   flex-grow: 1;
   height: unset;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     height: 100%;
     overflow-y: scroll;
 
diff --git a/src/components/Settings/styles.module.scss b/src/components/Settings/styles.module.scss
index ab566a0a95..3e3ab39f32 100644
--- a/src/components/Settings/styles.module.scss
+++ b/src/components/Settings/styles.module.scss
@@ -1,8 +1,8 @@
-@import "/styles/variables.scss";
+@use "styles/variables.scss";
 
 .container {
   position: relative;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     margin-top: 0;
   }
 }
@@ -19,18 +19,18 @@
   row-gap: 20px;
   column-gap: 40px;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     width: calc(100% - var(--nav-offset-x));
     padding: 1.25rem var(--spacing-lg) var(--spacing-sm);
   }
 
-  @media (min-width: $breakpoint-laptop) {
+  @media (min-width: variables.$breakpoint-laptop) {
     grid-template-columns: repeat(9, minmax(0, 1fr));
     gap: 40px;
     grid-template-rows: var(--settings-container-height-laptop);
   }
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 }
@@ -44,10 +44,10 @@
 .localeselect,
 .a11yselect {
   grid-column: span 3;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     grid-column: span 3;
   }
-  @media (min-width: $breakpoint-laptop) {
+  @media (min-width: variables.$breakpoint-laptop) {
     grid-column: span 3;
   }
 }
@@ -56,16 +56,16 @@
   grid-column: span 6;
   grid-row: 1;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     grid-column: span 6;
   }
 
-  @media (min-width: $breakpoint-laptop) {
+  @media (min-width: variables.$breakpoint-laptop) {
     grid-row: unset;
     grid-column: span 3;
   }
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     grid-column: span 6;
   }
 }
@@ -96,14 +96,14 @@
 
 .container:global(.noJumpTo) .wrapper:global(.open) {
   top: 40px;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     top: 0px;
   }
 }
 
 .wrapper:global(.open) {
   top: 80px;
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     top: 0px;
   }
 }
diff --git a/src/layouts/HomepageLayout.astro b/src/layouts/HomepageLayout.astro
index 0fe83af15b..a1eadcbb37 100644
--- a/src/layouts/HomepageLayout.astro
+++ b/src/layouts/HomepageLayout.astro
@@ -104,10 +104,10 @@ setJumpToState(null);
 </BaseLayout>
 
 <style lang="scss">
-  @import "../../styles/variables.scss";
+  @use "styles/variables.scss";
   h2 {
     @apply mb-sm mt-0;
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       font-size: 3.5rem;
     }
   }
diff --git a/styles/base.scss b/styles/base.scss
index 6e2908f29a..64b3a12222 100644
--- a/styles/base.scss
+++ b/styles/base.scss
@@ -1,4 +1,4 @@
-@import "./variables.scss";
-@import "./global.scss";
-@import "./code-editor.scss";
-@import "./markdown.scss";
+@use "variables.scss";
+@use "global.scss";
+@use "code-editor.scss";
+@use "markdown.scss";
diff --git a/styles/global.scss b/styles/global.scss
index 311340a11d..ce49368f82 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -1,4 +1,4 @@
-@import "variables.scss";
+@use "variables.scss";
 
 @font-face {
   font-family: "National Park";
@@ -76,7 +76,7 @@ h1 {
   margin-bottom: var(--spacing-md);
   font-family: var(--font-sans);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 4rem;
     font-size: 3.5rem;
     line-height: 1;
@@ -92,7 +92,7 @@ h2 {
   font-family: var(--font-sans);
   margin-top: var(--spacing-lg);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 2.5rem;
     line-height: 1.1;
     -webkit-text-stroke-width: 0.2px;
@@ -107,7 +107,7 @@ h3 {
   font-family: var(--font-sans);
   margin-top: var(--spacing-md);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1.875rem;
     line-height: 1.1333;
     -webkit-text-stroke-width: 0.2px;
@@ -122,7 +122,7 @@ h4 {
   font-family: var(--font-sans);
   margin-top: var(--spacing-md);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1.5rem;
     line-height: 1.1333;
     -webkit-text-stroke-width: 0.15px;
@@ -135,7 +135,7 @@ h4 {
   -webkit-text-stroke-width: 0.1px;
   font-family: var(--font-sans);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1.5rem;
     line-height: 1.167;
     -webkit-text-stroke-width: 0.15px;
@@ -148,7 +148,7 @@ h4 {
   -webkit-text-stroke-width: 0.05px;
   font-family: var(--font-serif);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1.25rem;
     line-height: 1.2;
     -webkit-text-stroke-width: 0.1px;
@@ -161,7 +161,7 @@ h4 {
   -webkit-text-stroke-width: 0.05px;
   font-family: var(--font-sans);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1.25rem;
     line-height: 1.2;
     -webkit-text-stroke-width: 0.15px;
@@ -174,7 +174,7 @@ h4 {
   -webkit-text-stroke-width: 0.05px;
   font-family: var(--font-sans);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     font-size: 0.875rem;
     line-height: 1.42;
     -webkit-text-stroke-width: 0.1px;
@@ -240,7 +240,7 @@ section,
     &,
     & > * {
       scroll-margin-top: var(--gutter-md);
-      @media (min-width: $breakpoint-tablet) {
+      @media (min-width: variables.$breakpoint-tablet) {
         scroll-margin-top: var(--gutter-sm);
       }
     }
@@ -269,7 +269,7 @@ section,
   overflow-x: auto;
 
   border-radius: 20px;
-  @media (max-width: $breakpoint-tablet) {
+  @media (max-width: variables.$breakpoint-tablet) {
     border-radius: 10px;
   }
 
@@ -333,7 +333,7 @@ pre.code-box,
   --nav-width: 100%;
   --nav-offset-x: 0;
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     --nav-width: 200px;
     --nav-offset-x: var(--nav-width);
   }
@@ -345,7 +345,7 @@ pre.code-box,
     background-color: var(--bg-color);
     z-index: 10000;
 
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       position: fixed;
       height: 100vh;
     }
@@ -372,7 +372,7 @@ pre.code-box,
       margin-right: var(--pacing-sm);
     }
 
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       padding: var(--spacing-sm) var(--spacing-lg);
     }
 
@@ -390,19 +390,19 @@ pre.code-box,
       // 43px is the height of the top mobile bar menu
       min-height: calc(50vh - var(--spacing-5xl) - 43px);
 
-      @media (min-width: $breakpoint-tablet) {
+      @media (min-width: variables.$breakpoint-tablet) {
         height: calc(50vh - var(--spacing-5xl));
         max-height: calc(50vh - var(--spacing-5xl));
         min-height: 300px;
       }
 
-      @media (min-width: $breakpoint-laptop) {
+      @media (min-width: variables.$breakpoint-laptop) {
         height: calc(50vh - var(--spacing-3xl));
         max-height: calc(50vh - var(--spacing-3xl));
       }
     }
 
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       margin-top: 0;
     }
   }
@@ -426,15 +426,15 @@ pre.code-box,
   column-gap: var(--gutter-sm);
   row-gap: var(--gutter-md);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     gap: var(--gutter-md);
   }
 
-  @media (min-width: $breakpoint-laptop) {
+  @media (min-width: variables.$breakpoint-laptop) {
     grid-template-columns: repeat(9, minmax(0, 1fr));
   }
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
 }
@@ -447,11 +447,11 @@ pre.code-box,
   column-gap: var(--gutter-sm);
   row-gap: var(--gutter-md);
 
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     gap: var(--gutter-md);
   }
 
-  @media (min-width: $breakpoint-desktop) {
+  @media (min-width: variables.$breakpoint-desktop) {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
@@ -473,12 +473,12 @@ th {
   border-bottom-width: 1px;
   border-top-width: 1px;
 
-  @media (max-width: #{$breakpoint-laptop - 1px}) {
+  @media (max-width: #{variables.$breakpoint-laptop - 1px}) {
     height: 100%;
     max-height: none;
     min-height: 180px;
   }
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     left: calc(-1 * var(--spacing-lg));
     width: calc(100% + var(--spacing-lg) * 2);
     max-width: calc(100% + var(--spacing-lg) * 2);
@@ -491,7 +491,7 @@ hr.full-bleed {
   left: -2.5rem;
   width: calc(100% + 5rem);
   max-width: calc(100% + 5rem);
-  @media (min-width: $breakpoint-tablet) {
+  @media (min-width: variables.$breakpoint-tablet) {
     left: calc(-1 * var(--spacing-lg));
     width: calc(100% + var(--spacing-lg) * 2);
     max-width: calc(100% + var(--spacing-lg) * 2);
diff --git a/styles/markdown.scss b/styles/markdown.scss
index a1b7b5189d..2172ca58d0 100644
--- a/styles/markdown.scss
+++ b/styles/markdown.scss
@@ -1,6 +1,6 @@
 // Default styles to apply to markdown generated content
 
-@import "variables.scss";
+@use "variables.scss";
 
 .rendered-markdown {
   & > *,
@@ -31,7 +31,7 @@
   a.button-link {
     margin-top: var(--spacing-md);
     min-width: 180px;
-    @media (min-width: $breakpoint-tablet) {
+    @media (min-width: variables.$breakpoint-tablet) {
       min-width: 220px;
     }
     color: var(--sidebar-type-color);