在SCSS编译后，将@import放在CSS末尾

Question

我们需要将@import放在CSS文件的末尾。例如:

SCSS:

@import "reset.css";
Body {
   font: 0.8em arial;
}
@import "customation.css"

编译成：

@import "reset.css";body{font: 0.8em arial;}@import "customation.css"

但是编译后，@import的顺序发生了变化，CSS文件将会变成这样：

@import "reset.css";@import "customation.css";body{font: 0.8em arial;}

对于我们的定制化来说，保持在最后导入custom.css文件非常重要。我们不能手动将@import放到CSS文件中，因为SCSS文件会发生改变并且CSS文件会被重写。

有什么建议吗？

- Amin Mousavi

Answer 1

你是否因特定原因使用@import呢？这会影响性能，并且现在已经没有主要用例了。

最好使用Sass的@import来连接文件，这还可以让你按照想要的顺序进行导入，并依赖于层叠效果。

@import "reset";

Body {
  font: 0.8em arial;
}

@import "customation";

- faustman

---

你不能使用 .css 文件来完成这个任务。 - cimmanon

是的，但你可以将文件重命名为.scss。有效的CSS文件也是有效的SCSS。 - faustman

Answer 2

你做不到。Sass聪明到知道@import声明必须在文件的开头，所以它会重写使其有效。

@importCSS at-rule 允许从其他样式表中导入样式规则。这些规则必须在所有其他类型的规则之前，除了@charset规则；因为它不是嵌套语句，所以不能在条件组at-rules内使用。

https://developer.mozilla.org/en-US/docs/Web/CSS/@import

如果这不可接受，您需要使用多个链接声明（对用户来说也更好）。

- cimmanon