`@media query` 在导入不同的屏幕尺寸时抛出错误答案

【问题标题】：`@media query` throw error, on import of different screen sizes`@media query` 在导入不同的屏幕尺寸时抛出错误
【发布时间】：2018-02-01 03:17:08
【问题描述】：

在我的样式文件夹中，我有 2 个子文件夹，分别是 mobile 和 desktop，它们都导入到主 style/app.css 文件中，例如： @import 'mobile/mobile'; @import 'desktop/desktop';

它工作正常。但我的情况是，这个导入需要分成 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

我该如何解决这个问题？有人请帮帮我吗？

提前致谢。

【问题讨论】：

标签： css

【解决方案1】：

你可以试试这样的：

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

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

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

并将生成：

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

【讨论】：

【解决方案2】：

导入需要在任何样式声明之前完成。但是对于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">

【讨论】：