Css `@媒体查询`导入不同屏幕大小时抛出错误

在我的样式文件夹中，我有两个子文件夹，分别为

mobile

和

desktop

，它们都导入到主

style/app.css

文件中，如：

@输入"流动/流动";；
@导入“桌面/桌面”

它很好用。但我认为，这种导入需要分成两种不同的屏幕大小，所以我喜欢：

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

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

但这不管用。将错误获取为：

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

我怎样才能解决这个问题？有人能帮我吗

提前感谢。
在进行任何样式声明之前都需要进行导入。
但是关于答案，你可以做以下几点：

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

您可以尝试以下方法：

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

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

或者您可以在SASS中执行此操作：

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

并将产生：