Rails：为什么我的自定义样式表不覆盖字体系列？

Question

我的应用中有Skeleton个样板CSS。它位于app/assets/stylesheets中。

app/assets/stylesheets
├── application.css
├── custom.scss
├── normalize.css
└── skeleton.css

Skeleton使用sans-serif字体家族（顶部为Raleway）。我想重写它。

所以我的自定义SCSS文件如下：

@import "skeleton";

body {
  font-family: serif;
}

main {
  @extend .container;
}

但是字体仍然是无衬线的。

现在，我认为我的自定义SCSS文件会在Skeleton之前加载，因为没有@import "skeleton"，@extend .container（在Skeleton中定义了.containter）就无法正常工作。

我尝试要求custom.scss的最后application.css像这样：

 *= require_tree .
 *= require_self
 *= require custom

并使用Skeleton及其关联的规范化工作表：

 *= require_tree .
 *= require_self
 *= require normalize
 *= require skeleton
 *= require custom

但是，我仍然发现我需要在自定义文件中导入Skeleton，并且不使用!important就无法覆盖字体家族。

这是怎么回事？我是否可以相信我的自定义样式表已在Skeleton之前加载？如何确保样式表最后加载？

Answer 1

一个简单的技巧就是，将样式表重命名为z.css之类的方式-这样，当样式表按字母顺序加载时，它将最终加载。不是正确的方法，而是黑客。

Answer 2

“ require_tree”。需要当前目录中的所有css文件，请尝试删除该行

*= require normalize
*= require skeleton
*= require custom
*= require_self

此外，我认为，如果您在custom.scss中@import，则无需将其添加到资产管道的清单中，因为sass预编译器会处理该问题

*= require normalize
*= require custom
*= require_self

我个人不喜欢将来自scss的@import与资产管道中的清单声明混合在一起，因为更难知道是什么在哪里放置什么代码。