Question

rails 4.1.8，sass-rails 5.0.1，sass 3.4.10，sprockets-rails 2.2.4，sprockets 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中，如何在normalize.css中注入两个@import url(...字体行

可能导致这种情况的原因是什么？我甚至不知道从哪里开始调查。

Answer 1

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

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

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

1 个答案: