How to combine identical media queries in SASS into one CSS?

Question

Layout

There is such a construction in SASS:

.block
  color: red

@media screen and (max-width: 767px)
  .block
    color: green

.block1
  color: blue

@media screen and (max-width: 767px)
  .block1
    color: yellow

Which compiles to CSS like this:

.block {
    color: red
}

@media screen and (max-width:767px) {
    .block {
        color: green
    }
}

.block1 {
    color: blue
}

@media screen and (max-width:767px) {
    .block1 {
        color: yellow
    }
}

How can I make it compile like this?

.block {
    color: red
}

.block1 {
    color: blue
}

@media screen and (max-width:767px) {
  .block {
        color: green
    }
    .block1 {
        color: yellow
    }
}

That is, the question is how to make media queries with the same breakpoints merge into one? Tell me please. I use webpack to build.

Answer 1

https://www.npmjs.com/package/group-css-media-queries

Answer 2

for Webpack:
npm i -D group-css-media-queries-loader

module: {
      rules: [
         {
            test: /\.css$/,
            use: [
               'css-loader',
               'group-css-media-queries-loader'
            ]
         },
         {
            test: /\.s[ac]ss$/,
            use: [
               'css-loader',
               'group-css-media-queries-loader',
               'sass-loader'
            ]
         },
      ]
   },