Laravel mix - Change production CSS output options

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.

user_339213 · Answer

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.

Laravel mix - Change production CSS output options

1 Answers