Require statement in application.css.scss

application.css.scss or application.css are kinda the same. Just rename your application.css to application.css.scss.

As for adding that line, it'll need to be right up the top, in a comment. Like this:

/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any styles * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * *= require_self *= require colorbox-rails */@import "bootstrap";@import "welcome";@import "sessions";@import "users";

Explicitly, I had this issue with fonts files declaring different font-faces using a single font.scss file in my stylesheets directory (Rails app using sass and haml). I had followed related issues (like this article on SO) and had tried a number of related solutions like removing '-' from font ttf filename, changing the url declarations in the font.scss file, etc.

@joshua.paling's solution worked for me ...

1. Change the font.scss file name to font.css

2. utilize the following declaration style in the application.scss file:

   /* ...    *= require_self    *= require fonts    */# @import other files here excluding the font.css file

And with this configuration the following font-face declarations still worked

 @font-face {   font-family: PT Serif;   src: url('PT_SerifWebRegular.ttf') format("truetype"); }