Как объединить одинаковые media запросы в SASS в один CSS?

Question

[SwaG]

Есть вот такая конструкция в 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

Которая компилируется в CSS следующим образом:

.block {
    color: red
}

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

.block1 {
    color: blue
}

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

Как сделать, чтобы комплировалось вот так?

.block {
    color: red
}

.block1 {
    color: blue
}

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

То есть, вопрос состоит в том, как сделать, чтобы media запросы с одинаковыми брекпоинтами объединялись в один? Подскажите, пожалуйста. Для сборки использую webpack

Answer 1

[Dymok]

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

Comments

[SwaG]

Дай Боже тебе здоровья! Спасибо, помогло!

[max1my5]

для 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'
            ]
         },
      ]
   },

Answer 2

[max1my5]

для 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'
            ]
         },
      ]
   },