Почему Sass перемещает мой @import в начало скомпилированного CSS?

Question

Рельсы 4.1.8, sass-rails 5.0.1, sass 3.4.10, звездочки-рельсы 2.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";

Вот как выглядит биттер / база:

@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, @import правило должно быть первым правилом в документе (кроме @charset правило).

А Sass любит создавать действительные CSS-файлы, поэтому все @importс на вершину.