Run sass-loader with expanded output style to fix variable substitution in production build

[eogas]

I ran into this on a project I'm working on that I based on this sample repo. sass-loader seems to remove whitespace by default, which means azure-devops-ui/buildScripts/css-variables-loader fails to produce valid CSS when using certain Formula Design styles.

I have a repro branch in my fork, but in short, adding a reference to $neutral-4 (or any similar color style) in any .scss file leads to a build failure when running npm run build.

Here's the output I get with my repro case:

ERROR in ./src/Samples/Hub/Hub.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/azure-devops-ui/buildScripts/css-variables-loader.js!./node_modules/sass-loader/dist/cjs.js!./src/Samples/Hub/Hub.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) C:\Users\evan\dev\azure-devops-extension-sample\src\Samples\Hub\Hub.scss Unclosed block

> 1 | .sample-hub{font-size:.875rem;background-color:rgba( 244, 244, 244 ,  1 )
    | ^
  2 | .sample-hub{font-size:.875rem;background-color:rgba( var(--palette-neutral-4,244, 244, 244) ,  1 )}
  3 |
 @ ./src/Samples/Hub/Hub.scss 2:14-203
 @ ./src/Samples/Hub/Hub.tsx

webpack 5.23.0 compiled with 1 error in 16280 ms

Upon debugging the webpack script, I found that the whole .sass file is being collapsed down to a single line before it hits css-variables-loader. But css-variables-loader is designed to process the file line by line, so we end up with invalid css as a result.

As a fix, I'm just specifying the 'expanded' output style for sass-loader. This worked for my use case, however I'm not primarily a frontend developer so I would not be surprised if there's a better way to do this.

[ghost]

All CLA requirements met.