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

【问题标题】：Rails: Why isn't my custom stylesheet overriding the font family?Rails：为什么我的自定义样式表没有覆盖字体系列？
【发布时间】：2019-01-31 09:57:12
【问题描述】：

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

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

Skeleton 使用无衬线字体系列（Raleway 在顶部）。我想覆盖它。

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

@import "skeleton";

body {
  font-family: serif;
}

main {
  @extend .container;
}

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

现在，我相信我的自定义 SCSS 文件是在 Skeleton 之前加载的，因为没有 @import "skeleton"，@extend .container（.containter 在 Skeleton 中定义）不起作用。

我曾尝试在application.css 中要求custom.scss，如下所示：

 *= require_tree .
 *= require_self
 *= require custom

像这样使用 Skeleton 及其关联的规范化表：

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

但是，我发现我需要在我的自定义文件中导入 Skeleton，如果不使用 !important，我无法覆盖字体系列。

发生了什么事？我是否相信我的自定义样式表是在 Skeleton 之前加载的？如何确保我的样式表最后加载？

【问题讨论】：

【解决方案1】：

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

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

另外，我认为如果你在 custom.scss 中 @import，那么你不需要将它添加到资产管道的清单中，因为 sass 预编译器会处理这个

*= require normalize
*= require custom
*= require_self

就我个人而言，我不喜欢将来自 scss 的 @import 与来自资产管道的清单声明混为一谈，因为很难知道将什么代码放在哪里。

【讨论】：

【解决方案2】：

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

【讨论】：