Во-первых имеет смысл делать это все через git.

А дальше либо объяснять верстальщику blade (что лучше, так сейчас у вас фактически 2 шаблонизатора и одна и та же работа выполняется два раза), либо выстроить какую-то такую систему:
- при изменении верстки верстальщик меняет pug/html и делает pull request
- программист ревьюит изменения и вносит соотвтствующие правки в blade шаблон

Стилизовать нативное окно подписки браузера невозможно.

Однако вы можете сделать собственное окно подписки (свестав и стилизовав его по своему усмотрению) и затем, с помощью Notifications API вызывать нативное окно подписки.

По такой схеме работают многие коммерческие сервисы пуш-уведомлений.

Вы не так поняли принцип работы с media queries.

CSS стили оформленные с помощью media queries не имеют приоритета применения. Они применяются ровно в том месте где указаны, но при заданных условиях.

Чтобы все заработало так как вам нужно, необходимо перенести
@import 'media'
в конец main.sаss файла.

Это регулярные выражения (regular expressions).

Регулярные выражения это не особенность JS или webpack, их можно использовать в большинстве ЯП. Часто их выносят в отдельную область знаний, например тут есть отдельный тег для вопросов по ним.

Если вы хотите потестировать и разобраться как они работают, то можете использовать вот этот сайт - https://regex101.com/