Rails application.css.scss not aware of other scss files in use?

Question

I'm following M Hartl's Rails Tutorial, and trying to add a bootswatch theme.

I have succeeded by using the boostrap-sass gem as defined in the tutorial, and twitter-bootswatch-rails gem from the net.

However, in Hartl's tutorial, all the CSS that we write in addition to default bootstrap is in a separate custom.css.scss file.

My application.css.scss file (Renamed from Rails default .css) contains

@import "bootstrap-sprockets";

// Import cerulean variables
@import "bootswatch/cerulean/variables";

// Then bootstrap itself
@import "bootstrap";

// And finally bootswatch style itself
@import "bootswatch/cerulean/bootswatch";
@import "custom";

Which works, however the custom.css.scss file has a reference to $gray-light, a variable set in bootstrap. The server will return an error at the variable reference in the css file, unless I add

@import "boostrap-sprockets";
@import "bootstrap";

to custom.css.

End result though, is I now have two gigantic CSS files being used, for what I would think is no reason.

I thought the idea of

@import "custom";

was to include my custom.css.scss file into the application.css.scss file so that it would all be in one place, and variables would work nicely.

The other method that works is to dump my entire custom.css.scss contents into application.css.scss but that defeats the point of having separate files.

Am I doing something wrong?

Edit: To add more fuel to the fire, I deleted the two lines from custom.css, and instead `@import bootswatch/cerulean/variables"; and it works. However, the resulting CSS that's on the website itself has NOTHING from that file.

Answer 1

This could well be wrong, but I post an answer to my own question as follows:

It appears that the sprockets lines //= require_self and //= require_tree , even when listed inside the comment section of the manifest as they are by default, are actually running.

This then causes each of the files "required" to be compiled separately. As a result, instead of getting a single application-FINGERPRINT.css file, I was getting an application, a custom, and a static_pages one. I assume this is the "require_tree" line.

After removing these lines, the @import "custom"; line works as I expected it to. The files are all combined into an application-FINGERPRINT.css file and I no longer need to @import anything at the top of custom.scss .