在 SCSS 编译后将 @import 保留在 CSS 的末尾

Posted 2023-02-16

【中文标题】在 SCSS 编译后将 @import 保留在 CSS 的末尾

【英文标题】：Keep @import at the end of CSS after SCSS compile

【发布时间】：2014-12-29 03:56:21

【问题描述】：

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

SCSS：

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

@import "customation.css"

编译为：

@import "reset.css";bodyfont: 0.8em arial;@import "customation.css"

但在编译后它改变了@import 顺序和 CSS 文件将是这样的：

@import "reset.css";@import "customation.css";bodyfont: 0.8em arial;

对于我们来说，将@importing 和custom.css 文件保留在末尾以进行定制非常重要。我们不能手动将@import 放入 CSS 文件，因为 SCSS 文件将被更改，CSS 文件将被重写。 有什么建议吗？

【参考方案1】：

你不能。 Sass 很聪明，知道 @import 声明必须在文件的开头，因此它会重写它以使您有效。

@import CSS at-rule 允许从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，@charset 规则除外；由于它不是嵌套语句，因此不能在条件组 at-rules 中使用。

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

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

【参考方案2】：

您是否出于任何特定原因使用@import？有性能影响，不再有主要用例。

如果你使用 Sass 的 @import 来连接文件会更好，这也可以让你按照你想要的顺序导入并依赖级联。

@import "reset";

Body 
  font: 0.8em arial;


@import "customation";

【讨论】：

您不能对 .css 文件执行此操作。

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