diff --git a/plugins/plugin-search/package.json b/plugins/plugin-search/package.json
index 69b8be4e39..c447175120 100644
--- a/plugins/plugin-search/package.json
+++ b/plugins/plugin-search/package.json
@@ -33,7 +33,8 @@
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
-    "copy": "cpx \"src/**/*.{d.ts,css,svg}\" lib"
+    "copy": "cpx \"src/**/*.{d.ts,svg}\" lib",
+    "style": "sass src:lib --style=compressed --no-source-map"
   },
   "dependencies": {
     "chokidar": "^3.5.3",
diff --git a/plugins/plugin-search/src/client/styles/search.css b/plugins/plugin-search/src/client/styles/search.css
deleted file mode 100644
index df78704992..0000000000
--- a/plugins/plugin-search/src/client/styles/search.css
+++ /dev/null
@@ -1,100 +0,0 @@
-.search-box {
-  display: inline-block;
-  position: relative;
-  margin-left: 1rem;
-}
-
-@media print {
-  .search-box {
-    display: none;
-  }
-}
-
-.search-box input {
-  -webkit-appearance: none;
-  appearance: none;
-  cursor: text;
-  width: var(--search-input-width);
-  height: 2rem;
-  color: var(--search-text-color);
-  display: inline-block;
-  border: 1px solid var(--search-border-color);
-  border-radius: 2rem;
-  font-size: 0.9rem;
-  line-height: 2rem;
-  padding: 0 0.5rem 0 2rem;
-  outline: none;
-  transition: all ease 0.3s;
-  background: var(--search-bg-color) url('search.svg') 0.6rem 0.5rem no-repeat;
-  background-size: 1rem;
-}
-
-.search-box input:focus {
-  cursor: auto;
-  border-color: var(--search-accent-color);
-}
-
-.search-box .suggestions {
-  background: var(--search-bg-color);
-  width: var(--search-result-width);
-  position: absolute;
-  top: 2rem;
-  right: 0;
-  border: 1px solid var(--search-border-color);
-  border-radius: 6px;
-  padding: 0.4rem;
-  list-style-type: none;
-}
-
-.search-box .suggestion {
-  line-height: 1.4;
-  padding: 0.4rem 0.6rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.search-box .suggestion.focus {
-  background-color: var(--search-item-focus-bg-color);
-}
-
-.search-box .suggestion.focus a {
-  color: var(--search-accent-color);
-}
-
-.search-box .suggestion a {
-  white-space: normal;
-  color: var(--search-item-text-color);
-}
-
-.search-box .suggestion .page-title {
-  font-weight: 600;
-}
-
-.search-box .suggestion .page-header {
-  font-size: 0.9em;
-  margin-left: 0.25em;
-}
-
-@media (max-width: 719px) {
-  .search-box input {
-    cursor: pointer;
-    width: 0;
-    border-color: transparent;
-    position: relative;
-  }
-  .search-box input:focus {
-    cursor: text;
-    left: 0;
-    width: 10rem;
-  }
-}
-
-@media (max-width: 419px) {
-  .search-box input:focus {
-    width: 8rem;
-  }
-  .search-box .suggestions {
-    width: calc(100vw - 4rem);
-    right: -0.5rem;
-  }
-}
diff --git a/plugins/plugin-search/src/client/styles/search.scss b/plugins/plugin-search/src/client/styles/search.scss
new file mode 100644
index 0000000000..6e6af22139
--- /dev/null
+++ b/plugins/plugin-search/src/client/styles/search.scss
@@ -0,0 +1,96 @@
+.search-box {
+  display: inline-block;
+  position: relative;
+  margin-left: 1rem;
+
+  @media print {
+    display: none;
+  }
+
+  input {
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: text;
+    width: var(--search-input-width);
+    height: 2rem;
+    color: var(--search-text-color);
+    display: inline-block;
+    border: 1px solid var(--search-border-color);
+    border-radius: 2rem;
+    font-size: 0.9rem;
+    line-height: 2rem;
+    padding: 0 0.5rem 0 2rem;
+    outline: none;
+    transition: all ease 0.3s;
+    background: var(--search-bg-color) url('search.svg') 0.6rem 0.5rem no-repeat;
+    background-size: 1rem;
+
+    @media (max-width: 719px) {
+      cursor: pointer;
+      width: 0;
+      border-color: transparent;
+      position: relative;
+    }
+
+    &:focus {
+      cursor: auto;
+      border-color: var(--search-accent-color);
+
+      @media (max-width: 719px) {
+        cursor: text;
+        left: 0;
+        width: 10rem;
+      }
+
+      @media (max-width: 419px) {
+        width: 8rem;
+      }
+    }
+  }
+
+  .suggestions {
+    background: var(--search-bg-color);
+    width: var(--search-result-width);
+    position: absolute;
+    top: 2rem;
+    right: 0;
+    border: 1px solid var(--search-border-color);
+    border-radius: 6px;
+    padding: 0.4rem;
+    list-style-type: none;
+
+    @media (max-width: 419px) {
+      width: calc(100vw - 4rem);
+      right: -0.5rem;
+    }
+  }
+
+  .suggestion {
+    line-height: 1.4;
+    padding: 0.4rem 0.6rem;
+    border-radius: 4px;
+    cursor: pointer;
+
+    a {
+      white-space: normal;
+      color: var(--search-item-text-color);
+    }
+
+    &.focus {
+      background-color: var(--search-item-focus-bg-color);
+
+      a {
+        color: var(--search-accent-color);
+      }
+    }
+
+    .page-title {
+      font-weight: 600;
+    }
+
+    .page-header {
+      font-size: 0.9em;
+      margin-left: 0.25em;
+    }
+  }
+}