extract CSS to external file and stop loading as string from JavaScript

game/less/lib/container.less

@@ -1,4 +1,5 @@
 .container {
+  display: block;
   max-width: 960px;
   margin: 0 auto;
   background-color: var(--background-color);

game/less/lib/main.less

@@ -1,18 +1,9 @@
 html, body {
   margin: 0;
   padding: 0;
-
-  --brand-color: rgb(252, 98, 0);
-  --background-color: rgb(0,0,0);
-  --text-color: #e8e8e8;
-  --default-margin: 30px;
 }
 
 body {
-  position: fixed;
-  top: 0; right: 0; bottom: 0; left: 0;
-  width: 100%;
-  height: 100%;
   padding: var(--default-margin) 0;
   background-color: var(--background-color);
   color: var(--text-color);

game/less/lib/page-footer.less

@@ -1,5 +1,6 @@
 .page-footer {
   display: flex;
+  margin: var(--default-margin) 0;
 
   .game-data {
     flex-grow: 1;

game/less/lib/responsive.less

@@ -1,4 +1,8 @@
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 960px) {
+  html, body {
+    padding: 0;
+  }
+
   .container .game-display-wrapper button.start-button {
     left: calc(50% - 100px);
     top: calc(50% - 28px);
@@ -27,5 +31,9 @@
 
   .container button.action-button#btn-throw-egg {
     bottom: 80px;
+  }
+
+  .game-display-wrapper canvas.game-display {
+    border-radius: 0;
   }  
 }

game/less/lib/variables.less

@@ -0,0 +1,6 @@
+* {
+  --brand-color: rgb(252, 98, 0);
+  --background-color: rgb(0,0,0);
+  --text-color: #e8e8e8;
+  --default-margin: 30px;
+}

game/less/style.less

@@ -1,3 +1,4 @@
+@import 'lib/variables.less';
 @import 'lib/main.less';
 
 @import 'lib/container.less';

game/views/game-view.pug

@@ -1,18 +1,11 @@
 extends layout
 block game-view
 
-  section.text-center
-
-    .game-title-block(hidden)
-      .game-title CyberEgg 2077
-      .game-subtitle Defend Earth From Cybersoy Invasion
-
-    .margin-block
-      .game-display-wrapper
-        canvas(id="game-display" width="960" height="540").game-display
-        button(type="button").start-button#start-button Start Game
-        button(type="button").direction-button#btn-move-left
-          img(src='/dist/assets/img/btn-left.svg', alt='Left button icon').button-icon
-        button(type="button").direction-button#btn-move-right
-          img(src='/dist/assets/img/btn-right.svg', alt='Left button icon').button-icon
-        button(type="button").action-button#btn-throw-egg 🥚
+  .game-display-wrapper
+    canvas(id="game-display" width="960" height="540").game-display
+    button(type="button").start-button#start-button Start Game
+    button(type="button").direction-button#btn-move-left
+      img(src='/dist/assets/img/btn-left.svg', alt='Left button icon').button-icon
+    button(type="button").direction-button#btn-move-right
+      img(src='/dist/assets/img/btn-right.svg', alt='Left button icon').button-icon
+    button(type="button").action-button#btn-throw-egg 🥚

game/views/layout.pug

@@ -4,7 +4,7 @@ html(lang="en")
     meta(charset="utf-8")
     meta(name="viewport" content="width=device-width, initial-scale=1")
     title CyberEgg 2077
-
+    link(rel="stylesheet", href="/dist/game-style.css")
   body
 
     .container
@@ -19,5 +19,4 @@ html(lang="en")
           a(href="https://nicecrew.digital", target="_blank")
             img(src="/platform/img/nicecrew-banner.png", alt="NiceCrew Banner").brand-header
 
-    script(src=`/dist/game-style.bundle.js?v=${pkg.version}`, type="module")
     script(src=`${gameModuleUrl}?v=${pkg.version}`, type="module")

package.json

@@ -8,7 +8,7 @@
     "description": "In a world where memes come to life, a pineapple takes on evil and wins!"
   },
   "scripts": {
-    "start": "node nice-harness.js"
+    "develop": "node nice-harness.js"
   },
   "repository": "https://git.digitaltelepresence.com/rob/cyberegg2077.git",
   "author": "Rob Colbert",

webpack.config.js

@@ -8,6 +8,8 @@ import path, { dirname } from 'path';
 import { fileURLToPath } from 'url';
 const __dirname = dirname(fileURLToPath(import.meta.url)); // jshint ignore:line
 
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
 export default {
   entry: {
     'game-app': './game/js/game-app.js',
@@ -26,6 +28,9 @@ export default {
       chunks: 'all',
     },
   },
+  plugins: [
+    new MiniCssExtractPlugin(),
+  ],
   module: {
     rules: [
       {
@@ -34,6 +39,9 @@ export default {
           {
             loader: "style-loader",
           },
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
           {
             loader: "css-loader",
             options: {