Convert App component to Sass

src/components/App/index.css

@@ -1,42 +0,0 @@
-* {
-    font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
-}
-
-html {
-    background: #efefef;
-    padding: 16px;
-}
-
-body.no-scroll {
-    overflow: hidden;
-}
-
-a {
-    text-decoration: none;
-}
-
-h1 {
-    color: #444;
-    font-size: 18px;
-    font-weight: 500;
-    text-align: center;
-}
-
-#Content {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    margin-top: 24px;
-}
-
-#NotFound {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 40px;
-}
-
-#NotFound h2 {
-    color: #444;
-    font-weight: 500;
-}

src/components/App/index.scss

@@ -0,0 +1,47 @@
+@import '~meyer-reset-scss';
+
+html {
+    background: $bg-color;
+    padding: $unit * 2;
+}
+
+body {
+    font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
+
+    &.no-scroll {
+        overflow: hidden;
+    }
+}
+
+a {
+    text-decoration: none;
+}
+
+h1, h2, h3, p {
+    color: $text-color;
+}
+
+h1 {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+}
+
+#Content {
+    display: flex;
+    flex-direction: column;
+    gap: $unit * 3;
+    margin-top: $unit * 3;
+}
+
+// #NotFound {
+//     display: flex;
+//     flex-direction: column;
+//     align-items: center;
+//     margin-top: 40px;
+// }
+
+// #NotFound h2 {
+//     color: #444;
+//     font-weight: 500;
+// }

src/components/App/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Route, useHistory } from 'react-router-dom'
-import './index.css'
+import './index.scss'
 
 import Header from '~components/Header'