What is the SASS equivalent to *= require_self and *= require_tree .?

Question

I am trying to solve a problem in my Rails 4 + Spree app and a post suggested me to convert my all.css file to all.scss (sass).

How do I convert

*= require spree/frontend
*= require_self
*= require_tree .

to @imports?

I did the

@import "spree/frontend";

Which was pretty straightforward, but now my app is "unstyled" and I am positive it is because of the other two directives.

Thanks!

Answer 1

'require_tree' will tell asset pipeline to include all the files within the specified directory. By default it is set to current directory with . (i,e dot). Refer to http://guides.rubyonrails.org/asset_pipeline.html for more details.

After changing the filename of application.css to application.scss, \*=require_tree . can be replaced with @import "/\*" (Example:- on a mac the statement would be translated to a path something like /Users/user_name/app_name/app/assets/stylesheets/*) . The * here imports all the files within the stylesheets directory. Refer to Is it possible to import a whole directory in sass using @import? for more information.

This should solve your problem.

But, the suggested way to go about this is to create another file with a .scss extension that contains all the imports you want and use \*=require_self and \*=require_tree . within the application.scss file.