Add sass support to web

web/package.json

@@ -15,6 +15,7 @@
     "@types/compression": "0.0.36",
     "@types/dotenv": "^6.1.1",
     "@types/express": "^4.17.0",
+    "bulma": "^0.7.5",
     "compression": "^1.7.1",
     "dotenv": "^8.0.0",
     "express": "^4.17.1",
@@ -29,7 +30,9 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/runtime": "^7.0.0",
+    "node-sass": "^4.12.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^7.0.17",
     "rollup": "^1.12.0",
     "rollup-plugin-babel": "^4.0.2",
     "rollup-plugin-commonjs": "^10.0.0",
@@ -40,6 +43,8 @@
     "rollup-plugin-typescript2": "^0.22.0",
     "sapper": "^0.27.0",
     "svelte": "^3.0.0",
+    "svelte-preprocess": "^2.15.1",
+    "svelte-preprocess-sass": "^0.2.0",
     "typescript": "^3.5.3"
   }
 }

web/rollup.config.js

@@ -7,6 +7,7 @@ import { terser } from 'rollup-plugin-terser';
 import config from 'sapper/config/rollup.js';
 import pkg from './package.json';
 import typescript from 'rollup-plugin-typescript2';
+import autoPreprocess from 'svelte-preprocess';
 
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
@@ -15,6 +16,22 @@ const legacy = !!process.env.SAPPER_LEGACY_BUILD;
 const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
 const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/');
 
+const preprocessOptions = {
+	transformers: {
+		scss: {
+			includePaths: [
+				'node_modules',
+				'src'
+			]
+		},
+		postcss: {
+			plugins: [
+				require('autoprefixer'),
+			]
+		}
+	},
+};
+
 export default {
 	client: {
 		input: config.client.input(),
@@ -27,7 +44,8 @@ export default {
 			svelte({
 				dev,
 				hydratable: true,
-				emitCss: true
+				emitCss: true,
+				preprocess: autoPreprocess(preprocessOptions)
 			}),
 			resolve({
 				browser: true,

web/src/routes/_layout.svelte

@@ -4,15 +4,8 @@
 	export let segment;
 </script>
 
-<style>
-	main {
-		position: relative;
-		max-width: 56em;
-		background-color: white;
-		padding: 2em;
-		margin: 0 auto;
-		box-sizing: border-box;
-	}
+<style global lang="sass">
+	@import "./style/main.sass";
 </style>
 
 <Nav {segment}/>

web/src/routes/index.svelte

@@ -1,46 +1,27 @@
-<style>
-	h1, figure, p {
-		text-align: center;
-		margin: 0 auto;
-	}
-
-	h1 {
-		font-size: 2.8em;
-		text-transform: uppercase;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
-
-	figure {
-		margin: 0 0 1em 0;
-	}
-
-	img {
-		width: 100%;
-		max-width: 400px;
-		margin: 0 0 1em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	}
-</style>
-
 <svelte:head>
 	<title>Sapper project template</title>
 </svelte:head>
 
-<h1>Great success!</h1>
+<h1>Great success!11!</h1>
 
-<figure>
+<!-- <figure>
 	<img alt='Borat' src='great-success.png'>
 	<figcaption>HIGH FIVE!</figcaption>
 </figure>
 
-<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>
+<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p> -->
+
+ <section class="section">
+    <div class="container">
+      <h1 class="title">
+        Hello World
+      </h1>
+      <p class="subtitle">
+        My first website with <strong>Bulma</strong>!
+      </p>
+    </div>
+  </section>
+
+<a class="button is-primary">
+  Button
+</a>

web/src/server.ts

@@ -1,9 +1,8 @@
 import compression from 'compression';
 import * as sapper from '@sapper/server';
-import { createConnection, getRepository, getConnectionOptions } from "typeorm";
+import { createConnection, getConnectionOptions } from "typeorm";
 import express from "express";
 import dotenv from "dotenv";
-import { KnownUser } from "@db/entity/KnownUser";
 import { DB_ENTITIES } from "@db/entities";
 
 if(process.env.NODE_ENV == "development") {
@@ -28,15 +27,6 @@ async function main() {
 		entities: DB_ENTITIES
 	});
 
-	let repo = getRepository(KnownUser);
-
-	let first = await repo.findOne();
-
-	if(first)
-		console.log(`Got user ${first} with ID ${first.userID}`);
-	else
-		console.log(`No user found!`);
-
 	express()
 		.use(
 			compression({ threshold: 0 }),

web/src/style/main.sass

@@ -0,0 +1 @@
+@import "bulma/bulma.sass";

web/src/template.html

@@ -16,6 +16,8 @@
 	     lazily loaded when it precaches secondary pages -->
 	%sapper.styles%
 
+	<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+
 	<!-- This contains the contents of the <svelte:head> component, if
 	     the current page has one -->
 	%sapper.head%

web/tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compileOnSave": true,
     "compilerOptions": {
-        "module": "ESNEXT",
+        "module": "esnext",
         "noImplicitAny": true,
         "removeComments": true,
         "preserveConstEnums": true,