Parcel not hmr-ing css

.gitignore

@@ -1,3 +1,4 @@
 .idea
 node_modules
 .cache
+dist

.postcssrc

@@ -1,5 +1,4 @@
 {
-  "modules": true,
   "plugins": {
     "autoprefixer": {
       "grid": true

dist/homework09.76c07fc7.js

@@ -1,7 +0,0 @@
-parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"QCba":[function(require,module,exports) {
-window.onload=function(){console.log("Hello world")};
-},{}],"jJx2":[function(require,module,exports) {
-var global = arguments[3];
-var e,t,o=arguments[3],a="__parcel__error__overlay__",r=module.bundle.Module;function n(e){r.call(this,e),this.hot={data:module.bundle.hotData,_acceptCallbacks:[],_disposeCallbacks:[],accept:function(e){this._acceptCallbacks.push(e||function(){})},dispose:function(e){this._disposeCallbacks.push(e)}},module.bundle.hotData=null}module.bundle.Module=n;var c=module.bundle.parent;if(!(c&&c.isParcelRequire||"undefined"==typeof WebSocket)){var i=location.hostname,l="https:"===location.protocol?"wss":"ws",s=new WebSocket(l+"://"+i+":52862/");s.onmessage=function(a){e={},t=[];var r=JSON.parse(a.data);if("update"===r.type){var n=!1;r.assets.forEach(function(e){e.isNew||h(o.parcelRequire,e.id)&&(n=!0)}),(n=n||r.assets.every(function(e){return"css"===e.type&&e.generated.js}))?(console.clear(),r.assets.forEach(function(e){f(o.parcelRequire,e)}),t.forEach(function(e){m(e[0],e[1])})):location.reload&&location.reload()}if("reload"===r.type&&(s.close(),s.onclose=function(){location.reload()}),"error-resolved"===r.type&&(console.log("[parcel] ✨ Error resolved"),p()),"error"===r.type){console.error("[parcel] 🚨  "+r.error.message+"\n"+r.error.stack),p();var c=d(r);document.body.appendChild(c)}}}function p(){var e=document.getElementById(a);e&&e.remove()}function d(e){var t=document.createElement("div");t.id=a;var o=document.createElement("div"),r=document.createElement("pre");return o.innerText=e.error.message,r.innerText=e.error.stack,t.innerHTML='<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;"><span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span><span style="top: 2px; margin-left: 5px; position: relative;">🚨</span><div style="font-size: 18px; font-weight: bold; margin-top: 20px;">'+o.innerHTML+"</div><pre>"+r.innerHTML+"</pre></div>",t}function u(e,t){var o=e.modules;if(!o)return[];var a,r,n,c=[];for(a in o)for(r in o[a][1])((n=o[a][1][r])===t||Array.isArray(n)&&n[n.length-1]===t)&&c.push(a);return e.parent&&(c=c.concat(u(e.parent,t))),c}function f(e,t){var o=e.modules;if(o)if(o[t.id]||!e.parent){var a=new Function("require","module","exports",t.generated.js);t.isNew=!o[t.id],o[t.id]=[a,t.deps]}else e.parent&&f(e.parent,t)}function h(a,r){var n=a.modules;if(n){if(!n[r]&&a.parent)return h(a.parent,r);if(!e[r]){e[r]=!0;var c=a.cache[r];return t.push([a,r]),!!(c&&c.hot&&c.hot._acceptCallbacks.length)||u(o.parcelRequire,r).some(function(e){return h(o.parcelRequire,e)})}}}function m(e,t){var o=e.cache[t];if(e.hotData={},o&&(o.hot.data=e.hotData),o&&o.hot&&o.hot._disposeCallbacks.length&&o.hot._disposeCallbacks.forEach(function(t){t(e.hotData)}),delete e.cache[t],e(t),(o=e.cache[t])&&o.hot&&o.hot._acceptCallbacks.length)return o.hot._acceptCallbacks.forEach(function(e){e()}),!0}
-},{}]},{},["jJx2","QCba"], null)
-//# sourceMappingURL=/homework09.76c07fc7.js.map

dist/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>The UAM Times</title></head><body> <nav> </nav> <main> <section id="sports"> <header> <h3>Sports</h3> </header> <article> <figure> <img src="/sports01.72c68351.jpg" alt="Free kick"> <figcaption>Free kick at second half.</figcaption> </figure> <h4>We won versus some other team.</h4> </article> </section> <section> <header> <h3>Stuff</h3> </header> <article> </article> </section> </main> <aside> Advertisement </aside> <footer> Made by Jakub Koralewski. </footer> </body><script src="/src.76c07fc7.js"></script></html>

dist/src.76c07fc7.js

@@ -1,4 +0,0 @@
-parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"QCba":[function(require,module,exports) {
-window.onload=function(){console.log("Hello world")};
-},{}]},{},["QCba"], null)
-//# sourceMappingURL=/src.76c07fc7.js.map

dist/src.76c07fc7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";AAAA,OAAO,OAAS,WACf,QAAQ,IAAI","file":"src.76c07fc7.js","sourceRoot":"../src","sourcesContent":["window.onload = function() {\r\n\tconsole.log(\"Hello world\")\r\n};"]}

package.json

@@ -5,7 +5,7 @@
   "main": "src/index.html",
   "scripts": {
     "dev": "parcel src/index.html",
-    "build": "parcel build src/index.html",
+    "build": "parcel build src/index.html --public-url /mockup",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -15,6 +15,8 @@
   "author": "Jakub Koralewski",
   "license": "MIT",
   "devDependencies": {
+    "cssnano": "^4.1.10",
+    "sass": "^1.23.7",
     "typescript": "^3.7.3"
   },
   "dependencies": {

src/index.html

@@ -5,9 +5,18 @@
 		<meta name="viewport"
 			  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<link href="index.scss" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css?family=Bungee+Inline&display=swap" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,900,900i&display=swap" rel="stylesheet">
 		<title>The UAM Times</title>
 	</head>
 	<body>
+		<header id="main-header">
+			<div id="top">
+				<div id="hamburger"></div>
+			</div>
+			<h1>THE TAJMS</h1>
+		</header>
 		<nav>
 
 		</nav>
@@ -42,5 +51,5 @@
 		</footer>
 
 	</body>
-	<script src="index.ts"></script>
+	<script src="index.ts" type="text/javascript"></script>
 </html>

src/index.scss

@@ -1,10 +1,32 @@
 * {
 	margin: 0;
 	padding: 0;
+	box-sizing: border-box;
 }
 
-body {
-	article {
-		background-color: blue;
+header#main-header {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+
+	#top {
+		height: 10rem;
+
+		#hamburger {
+			width: 1.5rem;
+			height: 3rem;
+
+			&:after {
+				content: '';
+				display: block;
+				width: 100%;
+				height: 2px;
+				background-color: black;
+			}
+		}
 	}
-}
+}
+
+article {
+	background-color: blue;
+}