use fast-sass-loader

index.html

@@ -30,23 +30,6 @@
       </header>
     </div>
 
-    <style>
-      .header-top {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-      }
-
-      #header-top-after {
-        width: 100%
-      }
-
-      .site-content {
-        position: relative;
-        background:coral
-      }
-    </style>
-
     <div class="header-top">
       <!--index cover image-->
       <figure data="mark" id="cover-img-container">

package.json

@@ -26,6 +26,7 @@
     "@babel/preset-typescript": "^7.6.0",
     "autoprefixer": "^9.7.0",
     "babel-loader": "^8.0.6",
+    "fast-sass-loader": "^1.5.0",
     "postcss-loader": "^3.0.0",
     "ts-loader": "^6.2.1",
     "typescript": "^3.6.4",

src/scss/index.scss

@@ -3,5 +3,5 @@
 @import "./components/normalize.scss";
 @import "./components/mdc.scss";
 
-@import "./layouts/index.scss";
+@import "./layouts/homepage.scss";
 

src/scss/layouts/homepage.scss

@@ -12,10 +12,22 @@
 }
 
 .header-top {
+  position: fixed;
+  width: 100%;
+  height: 100%;
   figure {
     width: 100%;
     margin: 0;
     overflow: hidden;
   }
   
+}
+
+#header-top-after {
+  width: 100%
+}
+
+.site-content {
+  position: relative;
+  background:coral
 }

webpack.config.js

@@ -34,12 +34,16 @@ module.exports = [{
             }
           },
           { 
-            loader: 'sass-loader',
+            // loader: 'sass-loader',
+            // options: {
+            //   sassOptions: {
+            //     includePaths: ['./node_modules']
+            //   }
+            // } 
+            loader: 'fast-sass-loader',
             options: {
-              sassOptions: {
-                includePaths: ['./node_modules']
-              }
-            } 
+              includePaths: ['./node_modules']
+            }
           },
         ]
       },