How to make an adaptive on PUG according to BEM when building on Webpack?

Question

Sass

How to properly organize adaptive layout according to the BEM methodology? As I understand it, a separate desktop.blocks folder is created for desktop devices, and touch.blocks is created for tablets and phones, and when building via webpack, everything is configured so that if a person accesses the site via phone, styles for small screens will be loaded, BUT how to arrange it? For example: in the desktop.blocks folder there is a header folder with header.pug and header.scss files, and I copy the header folder with its attachments to the touch.blocks folder and add a hamburger (for example) in the header.pug file and change the styles in scss files to media queries? Or you can do without the desktop.blocks and touch.blocks folders altogether and simply create the blocks folder, which will also store the header folder with pug and scss files and create media there. scss and it is for the header to prescribe properties for the adaptive and connect it through webpack? But then how will webpack understand that it is on small screens that this media.scss needs to be included?

Answer 1

Or you can do without the desktop.blocks and touch.blocks folders altogether and just create the blocks folder

Yes, it's easier and more convenient.

...and create media.scss there and set the properties for the adaptive for the header and connect it through webpack?

And here is an extra complication. Media queries can be written in header.scss. A separate media.scss is not needed.
1) if there is a desire to do according to BEM, then the documentation describes in detail about the options for the file structure. There is no mention of separate files with media query styles.
2) the issue with Webpack disappears.
3) there is no 100% correct option, make it convenient for you and those who will work with your code to support the project.