[sass-loader] always return compressed CSS file

[jimblue]

Since a recent update my CSS output are always compressed even without minifier configured.

After a long investigation, I found out sass-loader use dart-sass with outputStyle:'compressed' option by default.

To fix it, I've forced outputStyle: 'expanded' like so:

{
  loader: 'sass-loader',
  options: {
    sourceMap: true,
    implementation: require('sass'),
    sassOptions: {
      outputStyle: 'expanded',
    },
  },
},

IMO, sass-loader should not compressed CSS file, there are other tools for that.

Cheers

[jimblue]

Probably because dart-sass accept only two options outputStyle...
As their doc says:

Only the "expanded" and "compressed" values of outputStyle are supported.

[alexander-akait]

Look here https://github.com/webpack-contrib/sass-loader/blob/master/src/getSassOptions.js#L68, by default we use compressed output when you in production mode, you can change this using sassOptions.outputStyle, but it is not recommend

[andreyvolokitin]

Why it is not recommended? I want to minify my CSS later with CSSO and I wanted to disable SASS minification for that, but now I'm confused.

[haakenlid]

This bug caused some really annoying problems for us, which I just wasted many hours trying to figure out. Seems like it was merged as a "bugfix" #723, but to me it looks like a breaking change.

With the compressed output, autoprefixer comments are stripped out, which disables postcss-preset-env features. But this happens silently, and only when building for production.

Here's a related bug with further explanation:
symfony/webpack-encore#638

[andreyvolokitin]

I think this is more of a convention of minifying all resources for production. I simply turned off SASS minification and had no problems

[haakenlid]

I'd rather have the postcss-loader get the same input in production as in development.

I use a minifier as the last webpack loader for css files in production, so I don't need sass-loader to magically determine whether to minify its output or not.

It would make more sense that people who use sass-loader by itself pass in outputStyle: 'compressed' instead, if that's what they want.

[I-Want-ToBelieve]

Time has passed so long, hasn't this issue been taken seriously?
sass-loader should not do minify!

FullHuman/purgecss#294

[wangxianfa]

The root cause is loaderContext.mode is undefined. so isProductionLikeMode function return true

function isProductionLikeMode(loaderContext) { return ( loaderContext.mode === 'production' || !loaderContext.mode || loaderContext.minimize ); }

[kirkbross]

I think this is more of a convention of minifying all resources for production. I simply turned off SASS minification and had no problems

how do you turn it off? no matter what outputStyle I pass to sass it returns compressed. 'expanded' or 'compressed' result in compressed.

[WangZhenHao]

In production mode "sass-loader": "^7.2.0" compressed CSS file had bug。It change that CSS's content property value

{ loader: 'sass-loader', options: { outputStyle: 'expanded' } }

uncompressed css's file can fixed that