Question

我的项目中有20多个.scss表。

我想把它们放在'进口'表格中，根据屏幕宽度，只读取某些表格。

我在使用以下内容的imports.css的非SASS项目中工作：

@import url('sheet-1.css');

@import url('sheet-2.css') screen and (min-width: 300px) and (max-width: 730px);

我在imports.scss文件中尝试了这个 - 但编译后的imports.css有错误说：

Syntax error: Invalid CSS after \"sheet-2.css') \": expected selector or at-rule, was \"screen and (min...\"\A

这是错误的做法吗？ ..还是有解决方案？

Answer 1

当您使用url()时，这显然是Sass解析器中的错误。你会想要这样写它：

@import 'sheet-1.css';
@import 'sheet-2.css' screen and (min-width: 300px) and (max-width: 730px);

这应该编译为（CSS验证器说这是有效的）：

@import url(sheet-1.css);
@import 'sheet-2.css' screen and (min-width: 300px) and (max-width: 730px);

我代表您提交了错误报告，您可以在此处跟踪：https://github.com/nex3/sass/issues/1042

但是，我建议您将这些文件转换为Sass，以便将它们编译为单个CSS文件。所有浏览器都会下载所有链接的样式表，即使它们当前不符合媒体查询限制：

@import 'sheet-1'; // filename = _sheet-1.scss
@media screen and (min-width: 300px) and (max-width: 730px) {
    @import 'sheet-2'; // filename = _sheet-2.scss
}

SASS @import多个文件，具体取决于屏幕大小

1 个答案: