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

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