diff --git a/quartz/components/AliasList.tsx b/quartz/components/AliasList.tsx
index c7a64b522..3253f8c03 100644
--- a/quartz/components/AliasList.tsx
+++ b/quartz/components/AliasList.tsx
@@ -21,43 +21,6 @@ const AliasList: QuartzComponent = ({ fileData, displayClass }: QuartzComponentP
   }
 }
 
-AliasList.css = `
-.aliases {
-  margin: 1rem 0;
-}
-
-.aliases h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 0.9rem;
-  color: var(--gray);
-  font-weight: 600;
-}
-
-.aliases-list {
-  list-style: none;
-  display: flex;
-  padding-left: 0;
-  gap: 0.4rem;
-  margin: 0;
-  flex-wrap: wrap;
-}
-
-.aliases-list > li {
-  display: inline-block;
-  white-space: nowrap;
-  margin: 0;
-  overflow-wrap: normal;
-}
-
-.alias-item {
-  border-radius: 6px;
-  background-color: var(--lightgray);
-  color: var(--dark);
-  padding: 0.2rem 0.4rem;
-  margin: 0 0.1rem;
-  font-size: 0.8rem;
-  border: 1px solid var(--border);
-}
-`
+AliasList.css = "./styles/aliaslist.scss"
 
 export default (() => AliasList) satisfies QuartzComponentConstructor
diff --git a/quartz/components/styles/aliaslist.scss b/quartz/components/styles/aliaslist.scss
new file mode 100644
index 000000000..f5fa2a431
--- /dev/null
+++ b/quartz/components/styles/aliaslist.scss
@@ -0,0 +1,36 @@
+.aliases {
+  margin: 1rem 0;
+
+  h4 {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.9rem;
+    color: var(--gray);
+    font-weight: 600;
+  }
+}
+
+.aliases-list {
+  list-style: none;
+  display: flex;
+  padding-left: 0;
+  gap: 0.4rem;
+  margin: 0;
+  flex-wrap: wrap;
+
+  > li {
+    display: inline-block;
+    white-space: nowrap;
+    margin: 0;
+    overflow-wrap: normal;
+  }
+}
+
+.alias-item {
+  border-radius: 6px;
+  background-color: var(--lightgray);
+  color: var(--dark);
+  padding: 0.2rem 0.4rem;
+  margin: 0 0.1rem;
+  font-size: 0.8rem;
+  border: 1px solid var(--border);
+}