`@media query` throw error, on import of different screen sizes

In my style folder I have 2 sub folder as mobile and desktop both of them imported in the main style/app.css file like:

@import ‘mobile/mobile’;
@import ‘desktop/desktop’;

It works fine. But I case, this import need to split in to 2 different screen sizes, so I do like :

@media only screen and (max-device-width: 768px) {
 @import 'mobile/mobile';
}

@media only screen and (min-device-width: 769px) {
  @import 'desktop/desktop';
}

But not works. getting error as :

Error: You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
From "@extend .text-uppercase" on line 237 of tmp/sass_compiler-input_base_path-7VVKdugf.tmp/bootstrap/_type.scss

how can i fix this? any one please help me?

Thanks in advance.

Imports needs to be done before any style declaration.
But regarding to this answer, you can do the following:

<link rel="stylesheet" media="only screen and (max-device-width: 768px)" target="_blank" rel="nofollow" href="mobile.css">
<link rel="stylesheet" media="only screen and (min-device-width: 768px)" target="_blank" rel="nofollow" href="desktop.css">

You can try something like this:

@import url("desktop/desktop") only screen and (min-device-width: 769px);

or you can do this in SASS:

@media only screen and (min-device-width: 769px) {
    @import "desktop/desktop";
}

and will generate into:

@import url("desktop/desktop") only screen and (min-device-width: 769px);