use scss for global css

.gitignore

@@ -4,3 +4,4 @@ node_modules
 yarn.lock
 cypress/screenshots
 templates/.*
+assets/*.css

assets/global.css

@@ -1,105 +0,0 @@
-body {
-	margin: 0;
-	font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
-	font-size: 14px;
-	line-height: 1.2;
-	color: #333;
-	background: #ebeffb;
-}
-
-#svelte {
-	display: flex;
-	flex-direction: column;
-}
-
-main {
-	overflow-x: hidden;
-	overflow-y: scroll;
-	-webkit-overflow-scrolling: touch;
-	position: relative;
-	max-width: 800px;
-	padding: 15px 15px;
-	box-sizing: border-box;
-	margin: 85px auto;
-	background: white;
-	border: 1px solid #ededed;
-	border-radius: 1px;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	margin: 0 0 0.5em 0;
-	font-weight: 400;
-	line-height: 1.2;
-}
-
-h1 {
-	font-size: 2em;
-}
-
-a {
-	color: royalblue;
-	text-decoration: none;
-}
-
-a:visited {
-	color: royalblue;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-input {
-	border: 1px solid #dadada;
-	padding: 5px;
-}
-
-button {
-	font-size: 1.2em;
-	background: #ededed;
-	border-radius: 2px;
-	padding: 10px 15px;
-	border: 1px solid #ededed;
-}
-
-button {
-	cursor: pointer;
-}
-
-button:hover {
-	background: #ddd;
-}
-
-button:active {
-	background: #fafafa;
-}
-
-button.primary {
-	border: 1px solid #1e3066;
-	background: #668cff;
-	color: white;
-}
-
-button.primary:hover {
-	background: #446add;
-}
-
-button.primary:active {
-	background: #99b3ff;
-}
-
-p, label, input {
-	font-size: 1.3em;
-}
-
-ul, li, p {
-	padding: 0;
-	margin: 0;
-}
-
-@media (max-width: 767px) {
-	main {
-		padding: 5px 5px;
-		margin: 75px auto;
-	}
-}

package.json

@@ -3,15 +3,18 @@
   "description": "TODO",
   "version": "0.0.1",
   "scripts": {
-    "dev": "node server.js",
+    "dev": "concurrently --kill-others \"npm run build-sass-watch\" \"node server.js\"",
-    "build": "sapper build",
+    "build": "npm run build-sass && sapper build",
     "start": "cross-env NODE_ENV=production node server.js",
+    "build-sass": "node-sass scss -o assets",
+    "build-sass-watch": "npm run build-sass && node-sass -w scss -o assets",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "test": "run-p --race dev cy:run"
   },
   "dependencies": {
     "compression": "^1.7.1",
+    "concurrently": "^3.5.1",
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.7",
     "express": "^4.16.2",
@@ -20,6 +23,7 @@
     "glob": "^7.1.2",
     "idb-keyval": "^2.3.0",
     "node-fetch": "^1.7.3",
+    "node-sass": "^4.7.2",
     "npm-run-all": "^4.1.2",
     "sapper": "^0.3.1",
     "serve-static": "^1.13.1",

scss/global.scss

@@ -0,0 +1,105 @@
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
+  font-size: 14px;
+  line-height: 1.2;
+  color: #333;
+  background: #ebeffb;
+}
+
+#svelte {
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  position: relative;
+  max-width: 800px;
+  padding: 15px 15px;
+  box-sizing: border-box;
+  margin: 85px auto;
+  background: white;
+  border: 1px solid #ededed;
+  border-radius: 1px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0 0 0.5em 0;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+a {
+  color: royalblue;
+  text-decoration: none;
+}
+
+a:visited {
+  color: royalblue;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+input {
+  border: 1px solid #dadada;
+  padding: 5px;
+}
+
+button {
+  font-size: 1.2em;
+  background: #ededed;
+  border-radius: 2px;
+  padding: 10px 15px;
+  border: 1px solid #ededed;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:hover {
+  background: #ddd;
+}
+
+button:active {
+  background: #fafafa;
+}
+
+button.primary {
+  border: 1px solid #1e3066;
+  background: #668cff;
+  color: white;
+}
+
+button.primary:hover {
+  background: #446add;
+}
+
+button.primary:active {
+  background: #99b3ff;
+}
+
+p, label, input {
+  font-size: 1.3em;
+}
+
+ul, li, p {
+  padding: 0;
+  margin: 0;
+}
+
+@media (max-width: 767px) {
+  main {
+    padding: 5px 5px;
+    margin: 75px auto;
+  }
+}