Insert scaffolding styles at start of <head> instead of end of <head>

This lets us remove an !important and makes using custom CSS more
intuitive, see #402

src/packager/packager.js

@@ -941,7 +941,7 @@ cd "$(dirname "$0")"
       cursor: ${await this.generateCursor()};
     }
     .sc-monitor-root[opcode^="data_"] .sc-monitor-value-color {
-      background-color: ${this.options.monitors.variableColor} !important;
+      background-color: ${this.options.monitors.variableColor};
     }
     ${this.options.custom.css}
   </style>

webpack.config.js

@@ -87,15 +87,26 @@ const makeScaffolding = ({full}) => ({
       }]),
       {
         test: /\.css$/i,
-        use: ['style-loader', {
-          loader: 'css-loader',
-          options: {
-            modules: {
-              localIdentName: 'sc-[local]',
-              exportLocalsConvention: 'camelCase',
-            },
+        use: [
+          {
+            loader: 'style-loader',
+            options: {
+              insert: (styleElement) => {
+                var el = document.head || document.body || document.documentElement;
+                el.insertBefore(styleElement, el.firstChild);
+              }
+            }
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: 'sc-[local]',
+                exportLocalsConvention: 'camelCase',
+              },
+            }
           }
-        }],
+        ],
       }
     ]
   },