I have included the Skeleton boilerplate css in my application from this source. It can be found within the directory app/assets/stylesheets.
app/assets/stylesheets
├── application.css
├── custom.scss
├── normalize.css
└── skeleton.css
The default font family used by Skeleton is sans-serif, with Raleway at the top. I am looking to change this font style.
In order to customize the font, my SCSS file includes the following:
@import "skeleton";
body {
font-family: serif;
}
main {
@extend .container;
}
However, despite these changes, the font continues to display as sans-serif.
It seems that my custom SCSS file may be loading before the Skeleton file, as without the @import "skeleton", the @extend .container (which is defined in Skeleton) does not take effect.
I have attempted to ensure that my custom stylesheet loads last by including it in the last position in application.css like so:
*= require_tree .
*= require_self
*= require custom
I have also tried different combinations with Skeleton and its associated normalize sheet:
*= require_tree .
*= require_self
*= require normalize
*= require skeleton
*= require custom
Despite these efforts, I still find myself needing to import Skeleton in my custom file and having to use !important in order to override the font-family property.
This situation raises the question - Could my custom stylesheet be loading before Skeleton, and how can I ensure that my stylesheet is loaded last?