Laravel mix - Change production CSS output options - laravel

Question

I am trying to change the CSS output style in webpack.mix.js, however it only seems to affect the Development build. How do I apply outpoutStyle options to the Production build?
Here, is my code in the webpack.mix.js file, changing the value of "outputstyle" only affects the Development build.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css', {
outputStyle : 'expanded'
})
.copy(`resources/images`, `public/images`, false);
laravel-mix: version 5.0.4
sass-loader: version 7.1.0
EDIT - Additional Information:
The problem I'm trying to solve is that my code works fine with a developer build, but then goes pear-shaped when I run a production build. I suspect it has something to do with how the production build takes something like this:
.selector-1 {
background-color: green;
color: red;
}
.selector-2 {
background-color: blue;
color: red;
}
and compiles it to this:
.selector-1 {
background-color: green;
}
.selector-1, .selector-2 {
color: red;
}
.selector-2 {
background-color: blue;
}
In my case, that's undesirable behavior and I believe it's causing scoping issues with my CSS Custom Properties. The compiled code is thousands of lines long so I haven't been able to pinpoint the exact problem - but I notice the development build doesn't do that and everything works fine.
Basically, I’ve got something like this, which I’m using for theming:
:root {
—theme-base: red;
}
.theme-green {
—theme-base: green;
}
everything works fine in Dev mode… but in Prod some of the elements are inheriting the wrong colour value.

Answer 1

So turns out the specific CSS you're trying to output is quite key. From private messaging you I found out it's to do with borders, and your original code is this:
.selector-1 {
border-top-width: 2px;
border-top-style: solid;
border-color: get-color(base, body);
}
In production mode that compiles to
.selector-1 {
border-color: var(--color-base-body)
}
.selector-1 {
border-top: 2px solid;
}
The problem is that if those border properties are in different class selectors, even though they're the same the browser doesn't know what to do with it. We need a way to have all of the relevant border properties in one selectors. Like so:
.selector-1 {
border: 2px solid get-color(base, body);
border-width: 2px 0 0;
}
That compiles to
.u-border-top-2 {
border: solid var(--color-base-body);
border-width: 2px 0 0;
}
...which renders correctly in the browser.
I'm not sure if this is a bug in sass-loader or if a new version fixes it - on first view it looks like the correct behaviour but the cases of borders not so much.