README.md update to avoid "An @import loop has been found" about bootstrap-sass

[mcbsys]

Sorry, just realized that even more explicit instructions are needed. If the file containing the @import statement is loaded based on the default //= require_tree . in application.css, then the file must be named so that it precedes all other files alphabetically. If it's named bootstrap_loader.css.scss and I have an apples.css.scss file containing custom CSS, the CSS in apples.css.scss will be clobbered by bootstrap.

There may be a way around this by using subdirectories and/or the 'stub' directive added to Sprockets 2.2.0. For now, naming the file "!bootstrap_loadfirst.css.scss" is a workaround. Other suggestions?

[thomas-mcdonald]

Sorry, just realized that even more explicit instructions are needed. If the file containing the @import statement is loaded based on the default //= require_tree . in application.css, then the file must be named so that it precedes all other files alphabetically. If it's named bootstrap_loader.css.scss and I have an apples.css.scss file containing custom CSS, the CSS in apples.css.scss will be clobbered by bootstrap.

I think that, in general, if you're using Sass w/Rails, it's better to have a application.css.scss file that uses @import to require exactly the files you want to load, or to explicitly define the files you want to load (using //require x), and in which order.

Having said that, the Readme isn't exactly clear wrt. require specifications. I'll see what I can cook up for 2.0.2.

[mcbsys]

FWIW, here is what I'm using now. I created application and scopes directories under app/assets/stylesheets for my application-level and scope-level override stylesheets, respectively. Then I have these "top-level" files:

app/assets/stylesheets/application.css:

/*
 * Load Bootstrap first so we can override it
 *= require bootstrap_loader

 * Application-level styles next
 *= require_directory ./application

 * Anything in this file is also application-level
 *= require_self

 * Finally the scope-level styles
 *= require_directory ./scopes

 * Note that we do NOT have the default "require_tree /." because we want to 
 * control the sequence of loads, especially getting Bootstrap loaded first.
*/

app/assets/stylesheets/bootstrap_loader.css.scss:

/* Do NOT name this file "bootstrap.css.scss" or you will get an @import loop. */

/* Override Bootstrap variables here */
// $primaryButtonBackground: #f00;

@import "bootstrap";
@import "bootstrap-responsive";

Seems to be working.

[thomas-mcdonald]

Fixed in 2.0.2