Keep comments in .scss with webpack SCSS loader

Using this webpack config to load scss file, I am trying to keep comments in my scss file in development mode and remove it in production mode.

{
  test: /\.(scss|sass|css)$/,
  exclude: /node_modules/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'sass-loader',
      options: {
        sassOptions: {
          outputStyle: 'expanded',
        },
      },
    },
  ],
},

Here is an example test.scss file:

$block: ".test-";

#{$block} {
  // Comments
  &class {
    width: 100%;
    height: 100%;
  }
}

The webpack output for the css is:

.test-class {
    width: 100%;
    height: 100%;
}

As you can see my comments disappeared. However, I would like to keep the comments in development mode and delete them in production. How could I achieve this?

from Recent Questions - Stack Overflow https://ift.tt/31TTNfT
https://ift.tt/eA8V8J