CSS: Move portico styles to webpack compilation.

static/styles/scss/portico.scss is now compiled by webpack
and supports SCSS syntax.

Changed the server-side templates to render the portico-styles
bundle instead of directly requiring the portico stylesheet. This
allows webpack to handle stylesheet compilation and minification.

We use the mini-css-extract-plugin to extract out css from the
includes in webpack and let webpacks production mode handle
minification. Currently we're not able to use it for dev mode
because it does not support HMR so we use style-loader instead.
Once the plugin supports HMR we can go on to use it for both
dev and prod.

The downside of this is that when reloading pages in the development
environment, there's an annoying flash of unstyled content :(.

It is now possible to make a change in any of the styles included
by static/styles/scss/portico.scss and see the code reload live
in the browser. This is because style-loader which we currently
use has the module.accept code built-in.

zproject/settings.py

@@ -871,6 +871,12 @@ PIPELINE = {
             'source_filenames': ('styles/stats.css',),
             'output_filename': 'min/stats.css'
         },
+        # Although this is being handled by webpack already it seems
+        # portico.css would still need to be generated for 5xx.html
+        # (the error page for when Django is down) which can't be
+        # rendered as a template.  This block could be removed after
+        # we add another way for that template. to find `portico.css`.
+        # (Or maybe use premailer to generate it?)
         'portico': {
             'source_filenames': (
                 'third/zocial/zocial.css',