css - `@media query` 抛出错误，导入不同的屏幕尺寸

Question

在我的样式文件夹中，我有 2 个子文件夹作为 mobile 和 desktop 它们都导入到主 style/app.css 文件中喜欢:
@import '手机/手机';
@import '桌面/桌面';

它工作正常。但我认为，这个导入需要分成 2 个不同的屏幕尺寸，所以我喜欢:

@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

我该如何解决这个问题？谁能帮帮我？

提前致谢。

Answer 1

导入需要在任何样式声明之前完成。但关于 this回答，您可以执行以下操作:

<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">