Merge branch 'master' into suspense

Author: wang3101

app/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './stylesheets/index.css';
+import './stylesheets/index.scss';
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('app'));

app/stylesheets/constants.scss

@@ -0,0 +1,8 @@
+$brandgold: #fce356;
+$sidebarblue: #24262f;
+
+@mixin centerWithFlex($justify: center) {
+  display: flex;
+  align-items: center;
+  justify-content: $justify;
+}

app/stylesheets/index.css app/stylesheets/index.scssapp/stylesheets/index.css renamed to app/stylesheets/index.scss

@@ -1,13 +1,14 @@
 @import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Nunito:wght@200&family=Quicksand:wght@300&display=swap');
+@import './constants.scss';
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-html {
+body {
   background-color: rgb(248, 249, 253);
   background: #24262f;
   font-size: 16px;
@@ -29,7 +30,3 @@ button {
 button:hover {
   background-color: #24262f;
 }
-
-/* img {
-  margin-bottom: -75px;
-} */

package.json

@@ -91,8 +91,10 @@
     "image-webpack-loader": "^6.0.0",
     "jest": "^26.1.0",
     "jest-config": "^26.1.0",
+    "node-sass": "^4.14.1",
     "nodemon": "^1.19.4",
     "prettier": "^2.0.5",
+    "sass-loader": "^9.0.2",
     "source-map-loader": "^1.0.0",
     "spectron": "^8.0.0",
     "style-loader": "^1.2.1",

webpack.config.js

@@ -27,8 +27,8 @@ module.exports = {
         exclude: /node_modules/,
       },
       {
-        test: /\.(css)$/,
-        use: ['style-loader', 'css-loader'],
+        test: /\.s?css$/,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
         exclude: /node_modules/,
       },
       {