Asset pipeline stylesheet not being included

Question

Why are my stylesheets in app/assets/stylesheets/ not being included by rails? It's strange because my javasripts in app/assets/javascripts/ are getting included.

I thought all assets in those directories should already be handled by a commented =require_tree . line in the CSS manifest file application.css.scss.

The line //= require name_of_asset in the application.js.coffee` seems to be working.

application.css.scss

@import "resets";
@import "bootstrap";
/*
 *= require_self
 *= require_tree .
 */

---

file directory tree

My actual full application.css.scss

@import "resets";
@import "bootstrap";
/* blanket styles */
@import "custom/cp_variables";
@import "custom/cp_custom";
@import "custom/cp_responsive";
/* plugin styles */
@import "spritz";
/*
 *= require select2
 *= require select2-bootstrap
 *= require_self
 *= require_tree .
 */

I am having problems loading the "socionics.css.scss" file, along with all of its siblings. The files nested in the under the "custom" subfolder work fine, since I used @import for those.

Also, leaving off .coffee suffix for some js files is intentional.

Answer 1

You may benefit from SCSS globbing

This is one of our actual application.css.sass files (sass & scss use the same pre-processor, so will work on both):

#app/assets/stylehseets/application.css.sass
@import variables
@import jquery/**/*

This should work out of the box (I installed the sass-globbing gem, but turned out we didn't need it!)

--

Fix

For you, I'd try this:

#app/assets/stylesheets/application.css.scss
@import "resets";
@import "bootstrap";

/* Blanket Styles */
@import "*" /* not sure if this will work for base dir */
@import "custom/*";

/* Plugins */
@import "spritz";
@import "select2";
@import "select2-bootstrap";

--

Update

In terms of ordering, I would presume alphabetical, and seems to confirm it here:

CSS is order dependent, as such, using this approach within your stylesheets to import styles that depend on the stylesheet's cascade creates an opportunity for styles to change more unpredictably than a manually asserted order. It is recommended that you only use globbing where order is unimportant; E.g. importing of library files.