diff --git a/astro.config.mjs b/astro.config.mjs
index 50295e691..7df895fb1 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -8,6 +8,15 @@ import expressiveCode from "astro-expressive-code";
 // https://astro.build/config
 export default defineConfig({
   site: "https://realfiction.net",
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler' // or "modern"
+        }
+      }
+    }
+  },
   integrations: [
     expressiveCode({ themes: ["dracula"] }),
     mdx({
diff --git a/src/components/Date.astro b/src/components/Date.astro
index 280b5e466..510d2a952 100644
--- a/src/components/Date.astro
+++ b/src/components/Date.astro
@@ -14,7 +14,7 @@ const [date, month, year] = [
 ---
 
 <style lang="scss">
-    @import "../styles/imports.scss";
+    @use "../styles/_common.scss" as common;
 
     time {
         font-size: 1rem;
@@ -25,12 +25,12 @@ const [date, month, year] = [
         grid-template-rows: repeat(3, auto);
         border: 1px solid var(--linkColorMain);
         border-radius: 5px;
-        @media (min-width: $mobile) {
+        @media (min-width: common.$mobile) {
             grid-template-columns: 1.5rem 3rem;
         }
 
         &:not(.page) {
-            @media (min-width: $desktop) {
+            @media (min-width: common.$desktop) {
                 grid-template-columns: repeat(3, auto);
             }
         }
@@ -44,7 +44,7 @@ const [date, month, year] = [
         background-color: var(--linkColorMain);
         color: white;
 
-        @media (min-width: $mobile) {
+        @media (min-width: common.$mobile) {
             grid-row: 1;
             grid-column: 2;
             background-color: initial;
@@ -52,7 +52,7 @@ const [date, month, year] = [
         }
 
         &:not(.page) {
-            @media (min-width: $desktop) {
+            @media (min-width: common.$desktop) {
                 background-color: var(--linkColorMain);
                 color: white;
                 grid-row: 1;
@@ -73,7 +73,7 @@ const [date, month, year] = [
         justify-content: center;
         align-items: center;
 
-        @media (min-width: $mobile) {
+        @media (min-width: common.$mobile) {
             background-color: var(--linkColorMain);
             color: white;
             grid-column: 2;
@@ -82,7 +82,7 @@ const [date, month, year] = [
         }
 
         &:not(.page) {
-            @media (min-width: $desktop) {
+            @media (min-width: common.$desktop) {
                 background-color: var(--background);
                 color: var(--text);
                 grid-column: 3;
@@ -99,14 +99,14 @@ const [date, month, year] = [
         align-self: center;
         justify-self: center;
 
-        @media (min-width: $mobile) {
+        @media (min-width: common.$mobile) {
             writing-mode: vertical-lr;
             grid-column: 1;
             grid-row: 1 / span 2;
         }
 
         &:not(.page) {
-            @media (min-width: $desktop) {
+            @media (min-width: common.$desktop) {
                 writing-mode: inherit;
                 grid-column: 1;
                 grid-row: 1;
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 4e37802fc..f1138216b 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,7 +2,7 @@
 import { Image } from 'astro:assets';
 ---
 <style lang="scss">
-    @import "../styles/imports.scss";
+    @use "../styles/_common.scss" as common;
     footer {
         width: 100%;
         display: flex;
@@ -14,13 +14,13 @@ import { Image } from 'astro:assets';
         font-size: 1rem;
         border-top: var(--lightSeparator);
 
-        @media (min-width: $iPad) {
+        @media (min-width: common.$iPad) {
             width: 90%;
         }
-        @media (min-width: $desktop) {
+        @media (min-width: common.$desktop) {
             width: 70%;
         }
-        @media (min-width: $largeDesktop) {
+        @media (min-width: common.$largeDesktop) {
             width: 55%;
         }
 
diff --git a/src/components/Header.astro b/src/components/Header.astro
index f3a3be17f..99fe3900d 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -6,7 +6,7 @@ const { title } = Astro.props;
 ---
 
 <style lang="scss">
-  @import "../styles/imports.scss";
+  @use "../styles/_common.scss" as common;
   nav {
     display: flex;
     align-items: stretch;
@@ -26,7 +26,7 @@ const { title } = Astro.props;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    @include widths;
+    @include common.widths;
   }
 
   h1 {
@@ -47,7 +47,7 @@ const { title } = Astro.props;
     color: var(--linkColorMain);
     & span {
       display: none;
-      @media (min-width: $iPad) {
+      @media (min-width: common.$iPad) {
         display: inline;
         width: inherit;
       }
@@ -73,7 +73,7 @@ const { title } = Astro.props;
 
   .hide-mobile {
     display: none;
-    @media (min-width: $iPad) {
+    @media (min-width: common.$iPad) {
       display: inline-block;
     }
   }
@@ -84,7 +84,7 @@ const { title } = Astro.props;
     width: 2.2rem;
     box-shadow: none;
     vertical-align: middle;
-    @media (min-width: $iPad) {
+    @media (min-width: common.$iPad) {
       display: none;
     }
   }
diff --git a/src/components/HomePageEntry.astro b/src/components/HomePageEntry.astro
index 5e8575243..48ad4f954 100644
--- a/src/components/HomePageEntry.astro
+++ b/src/components/HomePageEntry.astro
@@ -17,7 +17,7 @@ const {
 ---
 
 <style lang="scss">
-    @import "../styles/imports.scss";
+    @use "../styles/_common.scss" as common;
     article {
         margin-bottom: 3rem;
     }
@@ -31,7 +31,7 @@ const {
         flex-direction: row;
         align-items: center;
 
-        @media (min-width: $desktop) {
+        @media (min-width: common.$desktop) {
             justify-content: space-between;
         }
     }
@@ -40,7 +40,7 @@ const {
         font-size: 1.7rem;
         line-height: 2rem;
         margin: 0 0 0 0.5rem;
-        @media (min-width: $desktop) {
+        @media (min-width: common.$desktop) {
             margin: 0;
         }
     }
@@ -60,7 +60,7 @@ const {
     }
 
     .order {
-        @media (min-width: $desktop) {
+        @media (min-width: common.$desktop) {
             order: 2;
         }
     }
diff --git a/src/components/SimpleLinkList.astro b/src/components/SimpleLinkList.astro
index a967b8ea1..00cd74f7f 100644
--- a/src/components/SimpleLinkList.astro
+++ b/src/components/SimpleLinkList.astro
@@ -38,7 +38,7 @@ const groups = groupBy(entries, grouper);
 ---
 
 <style lang="scss">
-    @import "../styles/imports.scss";
+    @use "../styles/_common.scss" as common;
 
     h1 {
         margin-bottom: 3rem;
@@ -46,7 +46,7 @@ const groups = groupBy(entries, grouper);
 
     h2 a,
     ul a {
-        @include underlined-links;
+        @include common.underlined-links;
     }
 
     ul:has(ul) {
@@ -55,7 +55,7 @@ const groups = groupBy(entries, grouper);
         column-gap: 2rem;
         row-gap: 3rem;
         list-style: none;
-        @media (min-width: $iPad) {
+        @media (min-width: common.$iPad) {
             grid-template-columns: repeat(2, 1fr);
         }
 
diff --git a/src/components/mdx/Ai.astro b/src/components/mdx/Ai.astro
index e8efccf7e..037462be4 100644
--- a/src/components/mdx/Ai.astro
+++ b/src/components/mdx/Ai.astro
@@ -6,7 +6,7 @@ interface Props {
 const { inline = false } = Astro.props;
 ---
 <style lang="scss">
-    @import "../../styles/imports.scss";
+    @use "../../styles/_common.scss" as common;
     blockquote {
         display: inline-block;
         margin: 0;
@@ -40,7 +40,7 @@ const { inline = false } = Astro.props;
         line-height: 1rem;
         border-left: 2px solid rgba(0,0,0,0.2);
         
-        @media (min-width:$iPad) {
+        @media (min-width: common.$iPad) {
             top: -1.1rem;
         }
     }
diff --git a/src/components/mdx/MastoPost.astro b/src/components/mdx/MastoPost.astro
index 935dfe12f..6617b1ce0 100644
--- a/src/components/mdx/MastoPost.astro
+++ b/src/components/mdx/MastoPost.astro
@@ -6,7 +6,7 @@ const { url } = Astro.props;
 ---
 
 <style lang="scss">
-  @import "../../styles/imports.scss";
+  @use "../../styles/_common.scss" as common;
   div {
     display: flex;
     align-items: center;
@@ -17,7 +17,7 @@ const { url } = Astro.props;
     height: 200px;
     box-shadow: var(--standardShadow);
     
-    @media (min-width: $desktop) {
+    @media (min-width: common.$desktop) {
       width: 50%;
       height: 300px;
     }
diff --git a/src/components/mdx/Math.astro b/src/components/mdx/Math.astro
index 534b38b4f..5c837b2ff 100644
--- a/src/components/mdx/Math.astro
+++ b/src/components/mdx/Math.astro
@@ -11,7 +11,7 @@ const math = katex.renderToString(exp);
 ---
 
 <style lang="scss">
-    @import "../../styles/imports.scss";
+    @use "../../styles/_common.scss" as common;
     :global(.katex-html) {
         clip: rect(0 0 0 0);
         clip-path: inset(50%);
@@ -25,7 +25,7 @@ const math = katex.renderToString(exp);
     .has-caption {
         display: grid;
         grid-template-rows: auto;
-        @media (min-width: $mobile) {
+        @media (min-width: common.$mobile) {
             grid-template-columns: 1fr 1fr;
         }
     }
diff --git a/src/layouts/main.astro b/src/layouts/main.astro
index 20033e469..567824c2e 100644
--- a/src/layouts/main.astro
+++ b/src/layouts/main.astro
@@ -39,7 +39,7 @@ const { meta = [], title: pageTitle, skipFooter } = Astro.props;
       rel="stylesheet"
     />
     <style lang="scss">
-      @import "../styles/imports.scss";
+      @use "../styles/_common.scss" as common;
 
       body {
         display: flex;
@@ -51,12 +51,12 @@ const { meta = [], title: pageTitle, skipFooter } = Astro.props;
         :global(ul), :global(ol) {
           padding: 0 1rem;
           :global(ul), :global(ol) {
-            @media (min-width:$iPad) {
+            @media (min-width: common.$iPad) {
               padding: 0 1rem;
             }
           }
           
-          @media (min-width:$iPad) {
+          @media (min-width: common.$iPad) {
               padding: 0;
           }
         }
@@ -64,7 +64,7 @@ const { meta = [], title: pageTitle, skipFooter } = Astro.props;
 
       main {
         padding: 5rem 0 1rem 0;
-        @include widths;
+        @include common.widths;
       }
     </style>
   </head>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 7b30d4c77..28b7ca96f 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -4,13 +4,13 @@ import Info from "../components/mdx/Info.astro";
 ---
 
 <style lang="scss">
-  @import "../styles/imports.scss";
+  @use "../styles/_common.scss" as common;
   main {
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 1.5rem;
 
-    @media (max-width: $iPad) {
+    @media (max-width: common.$iPad) {
       grid-template-columns: 1fr;
     }
   }
@@ -24,14 +24,14 @@ import Info from "../components/mdx/Info.astro";
     gap: 1rem;
     font-size: smaller;
 
-    @media (max-width: $iPad) {
+    @media (max-width: common.$iPad) {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
     }
   }
 
   a.badge {
-    @include underlined-links;
+    @include common.underlined-links;
     padding: 0.25rem 0.25rem;
     display: block;
     text-align: center;
diff --git a/src/pages/archive/index.astro b/src/pages/archive/index.astro
index fa9112c59..9d5977bc2 100644
--- a/src/pages/archive/index.astro
+++ b/src/pages/archive/index.astro
@@ -12,16 +12,16 @@ const allYears = articles.reduce((agg, val) => {
 ---
 
 <style lang="scss">
-    @import "../../styles/imports.scss";
+    @use "../../styles/_common.scss" as common;
     ul {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-gap: 1rem;
         list-style: none;
-        @media (min-width: $iPad) {
+        @media (min-width: common.$iPad) {
             grid-template-columns: repeat(3, 1fr);
         }
-        @media (min-width: $desktop) {
+        @media (min-width: common.$desktop) {
             grid-template-columns: repeat(4, 1fr);
         }
     }
diff --git a/src/styles/imports.scss b/src/styles/_common.scss
similarity index 100%
rename from src/styles/imports.scss
rename to src/styles/_common.scss