Use external CSS files from .styles.scss source

[hannajones]

This PR provides a potential solution for using external stylesheets in our wizard web components. The webpack config changes basically:

• takes .scss source code and translates it to CSS using sass-loader
• specifies type: "asset/resource" which will emit a separate file and export the URL of that generated file by default
• specifies that the naming structure for the file that gets emitted to ensure it's a .css file

Once we've generated the CSS file we can import the .scss source in our web component to get the URL of the built file, then create a link pointing to that URL.

This whole process doesn't seem to work if we run things through MiniCssExtractPlugin.loader, so I've given the file a .styles.scss extension so that we can specify different Webpack rules for CSS we want to load into web components. (This was inspired by this article - I'm open to other naming conventions.)

I'm not 100% sure this is going to work in production environments, but it's working well for me locally, so seems like a starting point at least.

--

As a little experiment to check that we could load Protocol styles, I copied the contents of _protocol.scss into form-wizard.styles.scss and added an import for the protocol button component. This was the result:

[mikeconley]

This works great for me! Let's hope it works on staging!

[escattone]

Love it! Really nice work @hannajones, thank you! This should work great on stage/prod. I ran npm run webpack:build:prod locally and used dev tools to check where the shadow DOM elements were getting their CSS, and it was using form-wizard.styles.6b347252648b278f.css as expected.