How to organize import to sass file when using mobile first?

Question

css

There is a main style file called style.scss with the following structure:
/* For mobile: */
/* For smartphones: */
@ media only screen and (min-width: 480px) {
}
/* For desktop and tablets sm: */
@ media only screen and (min-width: 768px) {
}
/* For desktop md */
@ media only screen and (min-width: 992px) {
}
/* For desktop lg */
@ media only screen and (min- width: 1200px){
}
At the same time, some styles are placed in separate files. If there were no media breakpoints, then we do @ import "..." at the beginning of the main style file, but what if the styles being imported also have @ media, how in this case should we properly import and organize the files? Of course, you can leave only the mobile version in the imported files and override what is required in @ media in the main file. But somehow that doesn't seem like a good option.