为什么 Sass 将我的 @import 移到已编译的 CSS 的顶部？

Question

rails4.1.8,sass-rails5.0.1,sass3.4.10,链轮-rails2.2.4,链轮2.12.3

这是我的 application.scss 顶部的样子：

/*
 *= require_self
 *= depend_on_asset "myicons.eot"
 *= depend_on_asset "myicons.woff"
 *= depend_on_asset "myicons.ttf"
 *= depend_on_asset "myicons.svg"
 *= depend_on_asset "foo/bar.jpg"
 */

@import "normalize-rails";
@import "bourbon";
@import "grid_settings";
@import "neat";
@import "bitters/base";

这就是 bitters/base 的样子：

@import "variables";
@import "extends";
@import "typography";
@import "forms";
@import "tables";
@import "lists";
@import "flashes";
@import "buttons";

这是 _typography.scss 顶部的样子

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,500,700);

body {
  color: $base-font-color;
  font-family: $base-font-family;
  font-size: $base-font-size;
  -webkit-font-smoothing: antialiased;
  line-height: $base-line-height;
  font-family: $sans-serif;
}

这就是生成的 application.css 顶部的样子

@charset "UTF-8";
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,500,700);
/* line 9, /Users/john/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/normalize-rails-3.0.1/vendor/assets/stylesheets/normalize-rails/normalize.css */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

问题：请注意在生成的 css 中，两个 @import url(... 字体行是如何注入到 normalize.css

中的

这可能是什么原因造成的？我什至不知道从哪里开始调查。

Answer 1

根据CSS spec，@import规则必须是文档中的第一条规则（@charset规则除外）。

并且 Sass 喜欢生成有效的 CSS 文件，因此它将所有 @import 推到顶部。

为什么 Sass 将我的 @import 移到已编译的 CSS 的顶部？

Why does Sass move my @import to the top of the compiled CSS?

ruby-on-rails

sass

sprockets